ホームページ > 記事 > ウェブフロントエンド > CSS3 スケーラブル レイアウト ボックス モデル note_html/css_WEB-ITnose
CSS3 スケーラブル レイアウト ボックス モデル note_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:011019ブラウズ
CSS3 Flexible Layout Box Model
CSS3 によって導入されたレイアウト モードの Flexbox レイアウトは、利用可能なスペースを最適な方法で埋めるためにサブアイテムの幅と高さを変更できる機能をコンテナーに与えるという主なアイデアです。 Flex コンテナは、Flex アイテムを使用して、利用可能な空き領域を埋めるために自動的に拡張および縮小します。
さらに重要なのは、従来のレイアウト（上から下へのブロックレベル、左から右へのインライン）とは異なり、Flexboxのレイアウト方向は予測不可能であり、ページレイアウトには適していますが、大規模または複雑なアプリケーションのサポートには適していません。柔軟性の欠如。
通常のレイアウトがブロックとインラインのテキストフローの方向に基づく場合、フレックスレイアウトは「フレックスフロー」の方向に基づきます。まず、伸縮ボックス モデルの特別な用語をいくつか理解しましょう。
Spindle: Flex コンテナーの主軸は、主に Flex プロジェクトを構成するために使用されます。必ずしも水平である必要はなく、主に fle-direction 属性に依存します。
スピンドル開始点、主軸終了点: Flex プロジェクトの構成は、コンテナの主軸開始エッジから始まり、主軸終了点で終了します。
主軸の長さ: Flex プロジェクトの主軸方向の幅または高さは、プロジェクトの主軸の長さ属性です。Flex プロジェクトの主軸の長さ属性は、主軸に面した幅または高さの属性です。方向性が決まります。
横軸：主軸に垂直な軸を横軸といい、横軸の延長です。
交差軸開始点、交差軸終了点: 伸縮列の構成は、コンテナの交差軸開始エッジから始まり、交差軸終了点で終了します。
軸を横切る長さ: Flex プロジェクトの軸を横切る方向の幅または高さは、プロジェクトの軸を横切る長さ属性です。どちらが主軸方向を向いているかで決まります。
Flex レイアウトの構文仕様は長年にわたって大幅に変更されており、これにより Flexbox の使用にも一定の制限が生じています。構文仕様のバージョンが多く、ブラウザのサポートに一貫性がないため、Flexbox レイアウトはあまり使用されません。 Flexbox レイアウトの構文仕様は主に 3 種類に分かれます。
古いバージョンである 2009 バージョンは、最も初期のスケーラブル レイアウトです。残念ながら、Flexbox レイアウトのさまざまな属性のサポートが完全ではありません。 . ブラウザのプレフィックス。
ハイブリッド版、2011年版、IE10のみ対応。
最新バージョンは 2012 バージョンです。Safari ブラウザを除き、他のすべての最新ブラウザはこのバージョンをサポートしています。
Flex コンテナ属性
display
要素のモードをフレックス コンテナに変更するには、display 属性を使用する必要があります。
display:flex | inline-flex
flex: ブロックレベルのスケーラブルなコンテナとして設定します。
Inline-flex: インラインレベルのスケーラブルなコンテナとして設定します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } div>div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } #box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; border:1px solid; margin:20px; } #inline{ display:-moz-inline-box; display:-webkit-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flexbox; display:inline-flex; border:1px solid; margin:20px; }</style></head><body><div id="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div id="inline"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div></body></html> ブロックレベルのスケーラブルコンテナはインラインレベルのスケーラブルコンテナに似ています。デフォルトでは左から右に配置されますが、唯一の違いは、ブロックレベルのスケーラブルコンテナが排他的な行を占めることです。スケーラブルなコンテナはコンテンツに応じて変化します。
フレックスコンテナはブロックコンテナではないため、ブロックレイアウトを制御するために設計された一部のプロパティはフレックスレイアウトには適用できません。フローティングはフレックス コンテナには影響せず、フレックス コンテナのマージンはそのコンテンツのマージンと重なりません。インライン フレックス コンテナがフローティングされている場合、要素はブロックレベルのフレックス コンテナに表示されます。
flex-direction
FlexコンテナにFlexアイテムを配置する方向を定義します。
flex-direction:row | row-reverse | column | column-reverse
行: デフォルト値、書き込み方法が ltr の場合、Flex 項目は左から右に配置され、書き込み方法が rtl の場合、Flex 項目は右から左に配置されます。
row-reverse: 書き込み方法が ltr の場合、Flex アイテムは右から左に配置され、書き込み方法が rtl の場合、Flex アイテムは左から右に配置されます。
列: 行と同様に、方向は上から下です。
column-reverse: row-reverseと同様に、方向は下から上に配置されます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } div>div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flexbox; display:flex; border:1px solid; margin:20px; } .box1{ /*定义Flex项目在Flex容器中放置的方向,从左往右。*/ -moz-box-orient:block-axis; -moz-box-direction:normal; -webkit-box-orient:block-axis; -webkit-box-direction:normal; flex-direction:row; } .box2{ /*定义Flex项目在Flex容器中放置的方向，从右往左。*/ -moz-box-orient:block-axis; -moz-box-direction:reverse; -webkit-box-orient:block-axis; -webkit-box-direction:reverse; flex-direction:row-reverse; } .box3{ /*定义Flex项目在Flex容器中放置的方向，从上往下。*/ -moz-box-orient:inline-axis; -moz-box-direction:normal; -webkit-box-orient:inline-axis; -webkit-box-direction:normal; flex-direction:column; } .box4{ /*定义Flex项目在Flex容器中放置的方向，从下往上。*/ -moz-box-orient:inline-axis; -moz-box-direction:reverse; -webkit-box-orient:inline-axis; -webkit-box-direction:reverse; flex-direction:column-reverse; }</style></head><body><div class="box box1"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box2"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box3"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box4"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div> </body></html> デフォルト値の flex-direction が row に等しい場合、Flex 項目は左から右に配置されます。
flex-direction が row-reverse と等しい場合、Flex 項目は右から左に配置されます。
flex-directionがcolumnと等しい場合、Flex項目は上から下に配置されます。
flex-directionがcolumn-reverseと等しい場合、Flex項目は下から上に配置されます。
flex-wrap
デフォルトでは、Flex項目を可能な限り1行で表示します。 flex-wrapのプロパティ値に応じて、Flex項目を複数行で表示するように変更できます。
flex-wrap:nowrap | wrap | wrap-reverse
nowrap: デフォルト値、単一行表示、書き込み方法が ltr の場合、Flex 項目は左から右に配置され、書き込み方法が trl の場合、Flex 項目は右から左に配置されます。
Wrap: 複数行表示、書き込み方法が ltr の場合、Flex 項目は左から右に配置され、書き込み方法が trl の場合、Flex 項目は右から左に配置されます。
wrap-reverse: 複数行表示、書き込み方法が ltr の場合、Flex 項目は右から左に配置され、書き込み方法が trl の場合、Flex 項目は左から右に配置されます。
因为默认值nowrap不准换行，伸缩容器容纳不下伸缩项目时，各伸缩项目会根据默认的收缩比例进行缩小以适应伸缩容器的宽度。
.box{ ... flex-wrap:wrap;} flex-wrap等于wrap时，伸缩容器容不下伸缩项目时自动换行了。
.box{ ... flex-wrap:wrap-reverse;} flex-wrap等于wrap-reverse时，伸缩容器容不下伸缩项目时换行了。不同的是换行的方向相反。
flex-flow
这是flex-direction和flex-wrap两个属性的缩写,默认值是row nowrap。
flex-flow:flex-direction || flex-wrap
justify-content
用来设置伸缩项目在主轴上的对齐方式。指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的所有伸缩项目不能伸缩或可伸缩但是已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
justify-content:flex-start | flex-end | center | space-between | space-around
flex-start:默认值，伸缩项目向一行的起始位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾。
flex-end:和flex-start相反，伸缩项目向一行的结束位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的开始。
center:伸缩项目向一行的中间位置靠齐。伸缩容器的所有额外空间平均分布在第一伸缩项目前面和最后一个伸缩项目的后面。
space-between:伸缩项目会平均分布在行里。伸缩容器的所有额外空间平均分布在所有伸缩项目之间，但是在第一个伸缩项目之前和最后一个伸缩项目之后不分配空间，也就是说，第一个伸缩项目靠齐开始位置，最后一个伸缩项目靠齐结束位置。
space-around:伸缩项目会品均分布在行里。伸缩容器的所有额外空间品均分布在所有伸缩项目之间，但是第一个伸缩项目之前与最后一个伸缩项目之后只分配其他位置得到额外空间的一半。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:500px; height:500px; border:1px solid; margin:20px; display:flex; justify-content:flex-start; } body>div:first-child{ flex-flow:row nowrap; } body>div:last-child{ flex-flow:column nowrap; } .box div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> <div class="box"> <div>A</div> <div>B</div> <div>C</div></div> </body></html> justify-content等于默认值flex-start时，伸缩项目在主轴起点处对齐，所有额外空间在最后一个伸缩项目的后面。
.box{ ... justify-content:flex-end;} justify-content等于flex-end时，伸缩项目在主轴结束处对齐，所有额外空间在第一个伸缩项目前面。
.box{ ... justify-content:center;} justify-content等于center时，所有项目在容器主轴中间处对齐，额外空间在第一个前面和最后一个后面。
.box{ ... justify-content:space-between;} justity-content等于space-between时，第一个项目在主轴开始处，最后一个项目在主轴结束处，所有额外空间被其他项目平分。
.box{ ... justify-content:space-around;} justify-content等于space-around时，类似于space-between，但是第一个项目前面与最后一个项目后面分配了其他项目拥有额外空间一半的空间。
align-items
align-items属性和justify-content同样是用来管理伸缩容器额外空间，不同的是，justify-content是用来管理伸缩容器主轴方向的额外空间，而align-items是用来管理伸缩容器侧轴方向的额外空间。
align-items:flex-start | flex-end | center | baseline | stretch
flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
center:伸缩项目的外边距盒在该行的侧轴上居中放置。
baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
.box{ ... align-items:flex-start;} align-items等于flex-start时，伸缩项目在侧轴起点处对齐，额外空间在侧轴终点处。
.box{ ... align-items:flex-end;} align-items等于flex-end时，伸缩项目在侧轴结束处对齐，额外空间在侧轴起点处。
.box{ ... align-items:center;} align-items等于center时，伸缩项目在侧轴中间处对齐，额外空间在侧轴两端。
.box{ ... align-items:baseline;} align-items等于baseline时，如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效，那么额外空间在侧轴结束处。
.box{ ... align-items:stretch;} align-items等于stretch时，伸缩项目往侧轴方向拉伸以占用额外空间。
align-content
是伸缩项目占多行时在侧轴方向的对齐属性，这个属性将对每一行起作用而不是每个伸缩项目。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
flex-start:各行向伸缩容器的起点位置堆叠。
flex-end:各行向伸缩容器的结束位置堆叠。
center:各行向伸缩容器的中间位置堆叠。
space-between:各行在伸缩容器中平均分布。
space-around:各行在伸缩容器中品均分布，在两边各有一半空间。
stretch:默认值，各行将会伸展以占用额外空间。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ border:1px solid; margin:20px; display:flex; align-content:flex-start; height:500px; width:500px; } body>div:first-child{ flex-flow:row wrap; } body>div:last-child{ flex-flow:column wrap; } .box div{ min-width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div></div> <div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div> <div>C</div> <div>A</div> <div>B</div></div> </body></html> align-content等于flex-start时，各行向侧轴起点处对齐，额外空间在侧轴终点处。
.box{ ... align-content:flex-end;} align-content等于flex-end时，各行向侧轴终点处对齐，额外空间在侧轴开始处。
.box{ ... align-content:center;} align-content等于center时，各行向侧轴中间处对齐，额外空间在侧轴两端。
.box{ ... align-content:space-between;} align-content等于space-between时，第一行向侧轴起点处对齐，最后一行向侧轴终点处对齐，额外空间被除了第一行与最后一行处平分。
.box{ ... align-content:space-around;} align-content等于space-around时，第一行向侧轴起点处对齐，最后一行向侧轴终点处对齐，第一行与最后一行的额外空间是其他处额外空间的一半。
.box{ ... align-content:stretch;} align-content等于默认值stretch时，各行将沿着侧轴方向伸展以占用额外空间。
Flex项目属性
order
默认情况下，Flex项目是按照文档流的结构顺序排列，在Flexbox模型中，可以通过order属性来改变伸缩项目出现在文档中的顺序。
order:<number>;
number可以是负值，Flexbox容器将根据各项目中order值的大小进行排列。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ border:1px solid; margin:20px; display:inline-flex; flex-flow:row wrap; align-items:flex-start; } .box div{ min-width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ order:2; } .box div:nth-child(2){ order:1; } .box div:nth-child(3){ order:3; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> flex-grow
定义一个Flex项目的扩大比例。
flex-grow:<number>
默认值为0，不能取负值，没有单位。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ border:1px solid; margin:20px; display:flex; flex-flow:row wrap; align-items:flex-start; } .box div{ min-width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ flex-grow:1; } .box div:nth-child(2){ flex-grow:2; } .box div:nth-child(3){ flex-grow:1; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> 如果伸缩项目的flex-grow设置为1，每个伸缩项目将设置一个大小相等的额外空间。如果给其中一个伸缩项目设置flex-grow设置为2，这个伸缩项目所占的额外空间是其他伸缩项目所占额外空间的2倍。
也可以这样理解，把上例各项目的flex-grow值加起来等于4，就是把额外空间分成4份，比例为1的占1份，比例为2的占2份。
flex-shrink
定义一个Flex项目的缩小比例。
flex-shrink:<number>
默认值为1。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:200px; border:1px solid; margin:20px; display:flex; flex-flow:row nowrap; } .box div{ width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ flex-shrink:1; } .box div:nth-child(2){ flex-shrink:2; } .box div:nth-child(3){ flex-shrink:1; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> 与flex-grow类似，也是处理伸缩容器额外空间的属性，不同的是，flex-grow处理的是伸缩容器内部剩下的额外空间，而flex-shrink处理的是伸缩容器外部溢出的额外空间。上例中将溢出的额外空间分成4份，收缩比例为1的占1份，收缩比例为2的占2份，如果不设置收缩比例，默认的比例为1。
flex-basis
定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。
flex-basis:<length> | auto<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:500px; border:1px solid; margin:20px; display:flex; flex-flow:row nowrap; } .box div{ width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ flex-basis:150px; } .box div:nth-child(2){ flex-basis:200px; } .box div:nth-child(3){ flex-basis:50px; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> flex-basis类似于width，用来设置flex-basis长度并指定伸缩基准值，也就是根据可伸缩比例计算出额外空间的分布之前，伸缩项目主轴长度的起始数值。
如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下所示：
flex
flex是flex-grow，flex-shrink，flex-basis三个属性的缩写。第二个和第三个参数是可选值。默认值是0 1 auto。
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
建议使用缩写属性。如果flex取值为none，等于0 0 auto。
align-self
用来在单独的伸缩项目上覆写默认的对齐方式。
align-self:auto | flex-start | flex-end | center | baseline | stretch
align-self的值与align-items一样。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ width:400px; border:1px solid; margin:20px; display:flex; flex-flow:column wrap; } .box div{ width:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box div:nth-child(1){ align-self:flex-start; } .box div:nth-child(2){ align-self:center; } .box div:nth-child(3){ align-self:flex-end; }</style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> </div> </body></html> CSS3 Flexbox完。