Flexbox レイアウト mode_html/css_WEB-ITnose についての私の理解

CSS3 レイアウト モードの Flexbox は、フレキシブル ボックス モデルとも呼ばれ、ボックス モデルに最大限の柔軟性を提供するために使用されます。まず例を示します。以前は、このように水平方向と垂直方向の中央に配置される div ボックスを実装しました。オブジェクトの高さと幅がわかっている場合、中央の要素が絶対パーセントで配置され、マージン オフセットによって実装されます。

<style>    .container{        width: 600px;        height: 400px;        border: 1px solid #000;        position: relative;    }    .box{        width: 200px;        height: 100px;        border: 1px solid #000;        position: absolute;        left: 50%;        top: 50%;        margin-left: -100px;        margin-top:-50px;    }</style><div class="container">    <div class="box"></div></div>

flex を使用する場合、実装は簡単で、自分で計算する必要はなく、スケーラブル コンテナーに 2 つの属性を定義するだけで済みます。 、 justify-content は、主軸に沿った項目の配置を中心として定義します。 align-items は、スケーラブルな項目の横軸 (主軸に垂直な) の配置を中心として定義します。 🎜>

<style>	.container{	    width: 600px;	    height: 400px;	    border: 1px solid #000;	    display: flex;	    justify-content:center;	    align-items:center;		}	.box{	    width: 200px;  //宽度可以为任意	    height: 100px; //高度可以为任意	    border: 1px solid #000;		}</style><div class="container">    <div class="box"></div></div>

実は、Flexbox の優れた機能はそれだけではありません。 まず、その属性図を見てみましょう~

まず、この図を分析してみましょう。最初の子ノードから、Flexbox はコンテナと Flex プロジェクトで構成されていることがわかります。コンテナは親要素で、プロジェクトは子要素です。それらの間の関係の一部は次のように表現できます:

この図は、後続の属性分析で使用できます。

フレックス コンテナ

display:flex

フレックスボックス レイアウトを使用する場合、最初に親コンテナの表示値をフレックス (ブロック レベル) またはインラインで配置する必要があります。フレックス (インライン) クラス)。

この値が使用されると、スケーラブル コンテナはコンテンツの新しいスケーラブル フォーマット コンテキスト (FFC) を作成します。そのコンテキスト表示効果は、BFC ルート要素と同じです (BFC 機能: フロートは中断されません)。スケーラブル コンテナ、およびフレックス コンテナの境界はそのコンテンツの境界と重なりません)。

フレックス コンテナはブロック コンテナではないため、ブロック レイアウトを制御するために設計された一部のプロパティ、特に複数列 (列)、float、clear、vertical-align などの属性は flex レイアウトには適用できません。

flex-direction

[flex-direction] 属性は、上の図のスケーラブル コンテナ内の

主軸 の方向を制御するために使用され、また、スケーラブルなアイテムの方向。

flex-direction:row; もデフォルト値です。つまり、主軸の方向は通常の方向と同じで、左から右に配置されます。
flex-direction:row-reverse; 右から左に配置された行の反対方向。
flex-direction:column; 上から下に配置します。
flex-direction:column-reverse; 下から上に配置します。 上記はltrの書き方のみで、rtlの場合はその逆になります。

Web ページの表示効果は次のとおりです。

flex-warp

[flex-wrap] 属性は、フレックス コンテナーを単一行か複数行かによって、横軸の方向 (新しい行の積み重ね方向) も決まります。

flex-wrap:nowrap; フレックス コンテナは 1 行で表示されます (デフォルト値)。
flex-wrap:wrap;フレックス項目の各行の順序は上から下への順です。
flex-wrap:wrap-reverse; フレックス コンテナは複数行で表示されますが、フレックス アイテムの各行の順序は下から上に配置されます。

Web ページの効果については図を参照してください。

flex-flow

[flex-flow] 属性は flex-direction です。 (主軸方向) および フレックスラップ (交差軸方向) の 2 つのプロパティは、フレックス コンテナーの主軸と側軸を決定します。

flex-flow:[flex-direction][flex-wrap]; デフォルト値は row nowrap です:

flex-flow:row; もデフォルト値です。主軸は行の折り返しなしで 1 行に表示されます。主軸はインライン方向とは逆で右から左へ、各行に上から下へ項目が配置されます（横軸）。

Web ページの効果は次のとおりです:
ここでは、さまざまな組み合わせを自分で試すことができます。

justify-content

[justify-content] は、行上のすべてのフレックス項目がスケーラブルではない、またはスケーラブルであるがその値に達している場合に、主軸上のフレックス項目の配置を定義するために使用されます。この属性は、最大長に達した場合にのみ余分なスペースを割り当てます。このプロパティは、項目が行からオーバーフローした場合の項目の配置をある程度制御することもできます。

• justify-content:flex-start;伸缩项目向主轴的起始位置开始对齐，后面的每元素紧挨着前一个元素对齐。
• justify-content:flex-end;伸缩项目向主轴的结束位置对齐，前面的每一个元素紧挨着后一个元素对齐。
• justify-content:center;伸缩项目相互对齐并在主轴上面处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。
• justify-content:space-between;伸缩项目平均的分配在主轴上面，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。
• justify-content:space-around;伸缩项目平均的分布在主轴上面，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等，且等于中间元素两两的间距的一半。完美的平均分配，这个布局在阿里系中很常见。

还是看demo理解起来快一点：

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方式，这类似于[justify-content]属性，但是是另一个方向。（flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者分别定义主轴和侧轴的方向，后者分别定义主轴和侧轴中项目的对齐方式）。

• align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
• align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
• align-items:center;伸缩项目的外边距在侧轴上居中放置。
• align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。
• align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

下面demo只展示center和stretch的栗子，其他几个可以参考flex-start和flex-end那样。

align-content

[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用flex-wrap:wrap时候多行效果就出来了。

align-content: flex-start || flex-end || center || space-between || space-around || stretch;

• align-content: stretch;默认值,各行将会伸展以占用剩余的空间。
• 其他可以参考[justify-content]用法。

具体图片来至w3.org官方文档；

太麻烦。写不下去了，摔。

Flex项目

终于写到关于伸缩项目的相关属性了，主要是3个，order，flex（flex-grow，flex-shrink，flex-basis的组合），align-self；用来比较多的是前两个。

order

有一种用法比较多，想设置一组中有两个元素一个排第一，另外一个排最后，主需要将第一个的order:-1；另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box，想box4为一个显示，box1为最后一个显示。只需要 这样

<style>.container{        display: flex;    }    .box1{        order:1;    }    .box4{        order:-1;    }</style><div class="container">    <div class="box1">1</div>    <div class="box2">2</div>    <div class="box3">3</div>    <div class="box4">4</div></div>

显示效果就这样了：

flex

[flex]属性可以用来指定可伸缩长度的部件，是flex-grow（扩展比例）,flow-shrink（收缩比例）,flex-basis（伸缩基准值）这个三个属性的缩写写法，建议大家采用缩写的方式而不是单独来使用这3个属性。

flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]// flex-grow是必须得flex-shrink和flow-basis是可选的

• flex-grow:;其中number作为扩展比例，没有单位，初始值是0，主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
• flex-grow:;其中number作为收缩比例，没有单位，初始值是1，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例，在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。
• flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前，伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件，则「flex-basis」的指定值是长度零。

flex-basis用图来表示就是这样：

align-self

[align-self]用来在单独的伸缩项目上覆写默认的对齐方式，这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。

align-self: auto | flex-start | flex-end | center | baseline | stretch

我的看法

讲了这么多他们的使用，我们来看一看flexbox布局的兼容性。

具体大家可以见这个网站：caniuse

在PC端其实很乐观了，基本上主流的浏览器都已经兼容了flex的使用，但是到了移动端就不是那么好了，特别是国内浏览器，考虑到uc浏览器占了大头，但是uc从图中看到只兼容flex最老的一个版本，也就是2009年的版本，即display:box;很多现在flex的优秀特性到了它上面都不兼容了，所以建议大家在使用的时候，假如2009版本可以满足开发要求的话，还是去使用2009版本，这样风险更小。

但是假如想兼容多个浏览器，可以采用优雅降级的方式来使用，这里推荐一个scss的sass-flex-mixin,这样就可以使用最新的写法，并且兼容大部分浏览器了。

相信flexbox布局在以后的移动端会用得越来越多的。