css3 display:box

8690 ワード
css
display:box;
box-flexは
css 3新しく追加したボックスモデルの属性、その出現は解決することができます
N多構造で
css実装のレイアウト方式.古典的なレイアウトアプリケーションの1つは、レイアウトの垂直などが高く、水平に均等に分けられ、比例に分けられています.
現在
box-flexプロパティはfirefox、Opera、chromeブラウザで完全にサポートされていませんが、それらのプライベートプロパティを使用してfirefox(-moz-)、opera(-o-)、chrome/safari(-webkit-)を定義できます.
一、box-flex属性
box-flexは主にサブコンテナを親コンテナの幅に対して一定の規則で区分させる
htmlコード:

    
01

    
02

    
03

CSSコード:
.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

表示効果:説明:親コンテナwrapにcssプロパティdisplay:boxのサブコンテナを定義する必要があります(display:boxが定義されている場合、このコンテナはインライン要素として定義され、margin:0 px autoを使用して中央に配置するのは無効です.親コンテナを通過できるtext-align:centerを中央に配置するには).sectionOne、sectionTwo、sectionThreeのbox-flexにはそれぞれ3、2、1が設けられている.すなわち、この3つのサブコンテナは親コンテナwrapの幅600 pxを6部に分け、sectionOneは親構造の幅の3/6である300 px、sectionOneは親構造の幅の2/6である200 px、sectionThreeは親構造の幅の1/6である100 pxを占めている.以上は比例数で配分されていますが、いずれかのサブコンテナまたは複数のサブコンテナに固定幅が設定されている場合、どのように区分されますか?いずれかのサブコンテナまたは複数のサブコンテナに固定幅が設定されている場合、他のサブコンテナには設定されていません.サブコンテナに固定幅値が設定されている場合、そのサブコンテナは設定された幅値を直接適用し、他の設定されていない場合は、親コンテナの幅に基づいてサブコンテナ設定の固定幅を減算し、残りの幅に基づいて一定の割合で配分します.次のコードを参照してください:HTMLコード:

    
01

    
02

    
03

CSSコード:
.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
.sectionThree{
    width:200px;//      
    background:green;
box-flex:0;
-webkit-box-flex:0;//            0   
 }

展示効果:説明:sectionThreeは固定幅200 pxを設定し、親容器の幅600 pxから改子容器の200 pxを差し引いて400 pxが残っている.この400 pxの幅値はbox-flex設定の値で区分され、sectionOneは3/4の300 pxを占め、sectionTwoは1/4の100 pxを占めている.以上のコードに基づいてsectionTwoサブコンテナにmargin:0 px 50 pxを追加してサブコンテナ間に一定の間隔を生じさせ、その幅をどのように分配して区分するのか.次にCSSコードを見ます.
.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//  margin  
}
.sectionThree{
    width:200px;
    background:green;
}

展示効果:説明:親容器の幅600 pxから子容器を設置した200 pxを差し引いた上で100 pxを差し引く(2)×50)300 pxが残り、この300 px幅値はbox-flexで設定された値で区分され、sectionOneは3/4、225 px、sectionTwoは1/4、75 pxである.二、box属性の上「css 3弾性箱モデルのbox-flex」はbox-flexがどのように親容器の幅を区分して分配するかを説明し、次に親容器の中のbox属性がどのようなbox属性を含むかを見て、具体的な属性は以下のコードに示す.
box-orient | box-direction | box-align | box-pack | box-lines

1、box-orient box-orient(orientはより正確に配列する)は、親容器の裏容器の配列方式が水平か垂直かを決定するために使用される.オプションのプロパティは次のとおりです.
horizontal | vertical | inline-axis | block-axis | inherit

horizontal、inline-axis説明:boxにhorizontalまたはinline-axis属性を設定すると、その効果は一致するようで、サブコンテナを水平に並べることができ、具体的な両者にどのような実質的な違いがあるかはまだ明らかにされていない.親コンテナがhorizontalまたはinline-axisプロパティを選択してサブコンテナを水平に配置する場合は、親コンテナの幅を割り当てます.このとき、親コンテナが高さ値を定義している場合、そのサブコンテナの高さ値設定は無効であり、すべてのサブコンテナの高さは親コンテナの高さ値に等しい.親コンテナが高さ値を設定しない場合、サブコンテナの高さ値は有効であり、最大高さ値のサブコンテナの高さをとります.HTMLコード:

    
01

    
02

    
03

CSSコード:
.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-orient:horizontal;
	-webkit-box-orient:horizontal;
	box-orient:horizontal;//    
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展示効果:vertical、block-axis説明:boxにverticalまたはblock-axis属性を設定する(この属性はデフォルト値)効果は一致しているようで、サブコンテナを垂直に並べることができ、具体的な両者の実質的な違いはまだ明らかにされていない.親コンテナがverticalまたはblock-axisプロパティを選択してサブコンテナを垂直に配置する場合、親コンテナの高さを割り当てます.このとき、親コンテナが幅値を定義している場合、そのサブコンテナの幅値設定は無効です.親コンテナが幅値を設定しない場合、サブコンテナの幅値が有効で、最大幅値のサブコンテナの幅をとります.HTMLコード:

    
01

    
02

    
03

CSSコード:
.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-orient:vertical;
	-webkit-box-orient:vertical;
	box-orient:vertical;//    
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	height:100px;
	background:green;
}

表示効果:inherit説明:inheritプロパティは、親コンテナの関連プロパティを子コンテナに継承させます.2、box-direction box-direction親コンテナ内のサブコンテナの配列順序を決定するために使用され、具体的な属性は以下のコードに示す.
normal | reverse | inherit

normalは、デフォルト値がHTMLドキュメント内の構造の前後順に表示されます.box-directionがnormalに設定場合、構造はsectionOne、sectionTwo、sectionThreeの順に示す.HTMLコード:

    
01

    
02

    
03

CSSコード:
.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-direction:normal;//  mormal   
	-webkit-box-direction:normal;//  mormal   
	box-direction:normal;//  mormal   
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

表示効果:reverseは反転を表します:上に示すようにnomalの構造の配列順序をsectionOne、sectionTwo、sectionThreeに設定します;reverse反転を設定と、その構造の配列順序はsectionThree、sectionTwo、sectionOneとなる.HTMLコード:

    
01

    
02

    
03

CSSコード:
.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-direction:reverse;//     
	-webkit-box-direction:reverse;//     
	box-direction:reverse;//     
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展示効果:3、box-align box-alignは親容器の中の子容器の垂直位置合わせを表し、オプションパラメータは以下の通りです.
start | end | center | baseline | stretch

HTMLコード:


01

    
02

    
03

CSSコード:
.wrap{
	width:600px;
	height:108px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-align:stretch;
	-webkit-box-align:stretch;
	-o-box-align:stretch;
	box-align:stretch;
}
.wrap section{
	height:80px;
}
.wrap .sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.wrap .sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
	height:108px;
}
.wrap .sectionThree{
	width:100px;
	background:green;
}

startはbox-alignでトップアライメントを表し、下図のendでbox-alignでボトムアライメントを表し、下図のcenterでbox-alignでセンターアライメントを表し、下図のstretchでbox-alignで引張りを表し、親容器などの高さ3、box-pack box-packで親容器の中の子容器を表す水平アライメント方式に引張り、オプションパラメータは以下の通りです.
start | end | center | justify

HTMLコード:

    
01

    
02

    
03

CSSコード:
.wrap{
	width:600px;
	height:108px;
	border:1px solid red;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-pack:end;
	-webkit-box-pack:end;
	-o-box-pack:end;
	box-pack:end;
}
.wrap section{
	width:100px;
}
.wrap .sectionOne{
	background:orange;
}
.wrap .sectionTwo{
	background:purple;
}
.wrap .sectionThree{
	background:green;
}
start
box-packでは下図のように水平に左揃えを示します
end
box-packでは水平右揃えを示し、下図に示すように
center
下の図のようにbox-packで水平中央揃えを示します
justify
box-packでは水平等分親コンテナ幅を表す(唯一残念なことにfirefoxとoperaは一時的にサポートされず、safari、chromeのみがサポートされている)
cssにおけるwidth、heightの100%とauto
ASP.NETはHTMLページ要素に対して権限制御を行う(三)