ホームページ > 記事 > ウェブフロントエンド > CSS3 スケーラブル レイアウト ボックス model_html/css_WEB-ITnose
CSS3 スケーラブル レイアウト ボックス model_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:01:12951ブラウズ
CSS3-">CSS3 フレキシブル レイアウト ボックス モデル
CSS3 によって導入されたレイアウト モード フレックスボックス レイアウト。主なアイデアは、コンテナーにその機能を許可する機能を提供することです。
さらに重要なのは、Flexbox とは異なり、レイアウトの方向が予測できないことです。従来のレイアウトはページ レイアウトには適していますが、
に基づいている場合は、大規模なアプリケーションや複雑なアプリケーションをサポートする柔軟性に欠けます。ブロックとインライン テキストのフロー方向、次に Flex レイアウトは「Flex-flow」方向に基づきます。 まず、フレックス ボックス モデルのいくつかの特殊な用語を理解しましょう。 <.> スピンドル: Flex コンテナの主軸は主に Flex プロジェクトの構成に使用され、主に
スピンドルの方向属性に依存します。 point: Flex プロジェクトの構成は、主軸の始点から始まり、主軸の終点で終了します。主軸の長さ: の幅または高さ。主軸方向のフレックス項目は、プロジェクトの主軸の長さ属性です。
側軸: 主軸に垂直な軸を側軸と呼び、側軸方向の延長です。
側軸の始点、側軸の終点: 伸縮列の構成。コンテナの交差軸の開始エッジから開始し、交差軸の終了エッジで終了します
交差軸の長さ: 交差軸方向の Flex アイテムの幅または高さが交差軸です。
Flex レイアウトの構文仕様は、アイテムの長さ、および Flex アイテムの横軸の長さ属性です。多くのバージョンの構文仕様と一貫性のないブラウザのサポートがあるため、Flexbox レイアウトの構文仕様は主に 3 つのタイプに分類されません。 :
古いバージョンである 2009 バージョンは、主要な主流ブラウザのサポートとは若干異なります。 Flexbox レイアウトのさまざまな属性のサポートが完了していません。混合バージョン、2011. バージョンを使用する場合、各ブラウザのプレフィックスを追加します。IE10 でのみサポートされます。
最新バージョンは 2012 バージョンです。Safari を除き、他のすべての最新ブラウザはこのバージョンをサポートしています。
フレックス コンテナの属性
display
要素のモードをフレックス コンテナに変更するには、display 属性を使用する必要があります。
flex: ブロックレベルのスケーラブルなコンテナとして設定します。 inline-flex: インラインレベルのフレックスコンテナとして設定します。
display:flex | inline-flexブロックレベルのスケーラブルコンテナは、インラインレベルのスケーラブルコンテナと似ています。唯一の違いは、デフォルトで左から右に配置されることです。ブロックレベルのスケーラブルコンテナは単一行で出現しますが、インラインレベルのスケーラブルコンテナはコンテンツの変更に応じて変化します。フレックス コンテナはブロック コンテナではないため、ブロック レイアウトを制御するために設計された一部のプロパティはフレックス レイアウトには適用されません。フローティングはフレックス コンテナには影響せず、フレックス コンテナのマージンはそのコンテンツのマージンと重なりません。インライン フレックス コンテナがフローティングされている場合、要素はブロックレベルのフレックス コンテナに表示されます。
flex-direction
Flex アイテムが 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>
行: デフォルト値、書き込みメソッドが ltr の場合、Flex アイテムは左から右に配置され、書き込みメソッドが rtl の場合、Flex アイテムは右から配置されます。左へ。
row-reverse: 書き込みメソッドが ltr の場合、Flex アイテムは右から左に配置され、書き込みメソッドが rtl の場合、Flex アイテムは左から右に配置されます。
列: 行と同様に、方向は上から下です。
flex-direction:row | row-reverse | column | column-reversecolumn-reverse: row-reverse と同様に、方向は下から上に配置されます。
デフォルト値の flex-direction が row に等しい場合、Flex 項目は左から右に配置されます。
flex-direction が row-reverse と等しい場合、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-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 が列と等しい場合、Flex 項目は上から下に配置されます。
flex-direction が column-reverse と等しい場合、Flex 項目は下から上に配置されます。
flex-wrap
デフォルトでは、Flex 項目は可能な限り 1 行で表示されます。flex-wrap のプロパティ値に応じて、Flex 項目を複数行で表示するように変更できます。 。
nowrap: デフォルト値、単一行表示、書き込み方法が ltr の場合、Flex 項目は左から右に配置されます。書き込み方法が trl の場合、Flex 項目は右から配置されます。左へ。
wrap: 複数行表示、書き込み方法が ltr の場合、Flex 項目は左から右に配置され、書き込み方法が trl の場合、Flex 項目は右から左に配置されます。
wrap-reverse: 複数行表示、書き込み方法が ltr の場合、Flex 項目は右から左に配置され、書き込み方法が trl の場合、Flex 項目は左から右に配置されます。
flex-wrap:nowrap | wrap | wrap-reverse
因为默认值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完。