最近のマージンを説明するいくつかのブログの記事見て：フレックスコンテナの自動車の使用を、残念ながらほとんどのパフォーマンスを説明するページに浮遊している、我々はこの論文では、単純な浅いが、その性能のメカニズムを議論行い、メカニズムの底に取得できませんでした。
プライマー
毎日のビジネス反復プロセスは、フレックスは、一般的なレイアウトの魔法の武器を解決するために、既にフロントエンドエンジニアである。しかし、時折使用フレックス直接かつ即時に、いくつかの少し複雑なレイアウトのための十分な、あなたが必要とする層へのシンプルなレイアウトを見つける深化と。下記の私たちの共通のレイアウト図で、栗を解くためにグループ化パッケージ：
3つだけたわみ要素のうちのある容器は、我々の正当化コンテンツによって、互いから分離した場合に対処するのに十分である。必要な2つの要素は、フレックスレイアウトを使用して、図1におけるBCのような基、として処理する場合は、できませんレイアウト構造のシンプルなのに十分なことを確実にするために、要素を備えたラベルとしてのdiv AB等を用いる必要があり、コンテナの中央に配置されるBC新しいパッケージのニーズは、レイアウトコードに実装することができ、次のとおりです。
< DIV クラス= "フレックスコンテナ" > < DIV クラス= "A" > A </ DIV > < DIV クラス= "BC" > < DIV クラス= "B" > B </ DIV > < DIV クラス= "C " > C </ DIV > </ DIV > < DIV クラス=" D」> D </ DIV > </ DIV >
.flex容器 { ディスプレイ：フレックス。 正当化-コンテンツ：スペースの間 ; } .A { 背景：＃FFE6CC。 幅：100ピクセル ; } .BC { フレックス：1。 表示：フレックス。 正当化-コンテンツ：センター ; ALIGN-アイテム：センター ; } .B { 背景：＃FFF2CC。 幅：100ピクセル ; } .C { 背景：＃F8CECC。 幅：100ピクセル ; } .D { 背景：＃E1D5E7。 幅：100ピクセル ; }
その上よりも簡単なレイアウトがありますか？はい、それは余裕の使用である：自動。
マージンを使用してください：グループ要素に自動
あなたは余裕:.オートを使用する場合は、シンプルなレイアウト図を達成するためにどのように下には、レイアウトコードです。
<DIV CLASS = "フレックスコンテナ">
<DIV CLASS = "A"> A </ DIV>
<DIV CLASS = "B"> B </ DIV>
<DIV CLASS = "C"> C </ div>
< DIV CLASS = "D"> D </ div>
</ div>
.flex容器 { ディスプレイ：フレックス。 正当化-コンテンツ：スペースの間 ; } .A { 背景：＃FFE6CC。 幅：100ピクセル ; } .B { 背景：＃FFF2CC。 幅：100ピクセル ; margin-left：自動 ; } .C { 背景：＃F8CECC。 幅：100ピクセル ; マージン右：自動 ; } .D { 背景：＃E1D5E7。 幅：100ピクセル ; }
逆のプライマーコードは、赤色プロットさは、局所的な変化である。主な変更点は3つ以下の通りであります：
-
削除するプロパティが正当化コンテンツ外層フレックスでは。 [マージン：オート優先度をより高いコンテンツを正当化するよりも、このプロパティは失敗し、削除されました]
-
HTML簡略構造元の三層構造のは、唯一の簡略2つの必須。
-
BとCのマージン右マージン左のセットはautoです。
メカニズムに関する議論
で仕様CSSの原則の最良の説明。私たちは、最初のフレックスコンテナマージンの仕様を確認してください自動説明[ソースのリソースは、テキストの末尾に参考文献を参照することができます]。
仕様は明らかに二つの重要なポイントを示しています。
-
マージン：オート優先正当化コンテンツよりも、ALIGN-自己優先度の高いです
-
自動要素：、スペースの通常の割り当て後、まだ未割り当て領域がある場合は、残りのスペースは余裕に割り当てられます。
もっと余裕がある場合は、この仕様は、言っていない：自動要素、どのようにこのスペースを割り当てることを、MDNドキュメントを説明している[ソースリソースは、テキストの末尾に参考文献を参照することができます]？：
MDN明確にスペースが均等に余裕分割されます、通知：自動要素を全体的に、我々はそのマージンを使用することができますオート左とスペースの右側には、メインシャフトフレックスコンテナの方向でサブ要素に割り当てられます。
より多くの例
1. 设置外边距auto越多,分配数量越多
到此有看官可能有疑问了,如果flex容器,一个子元素margin-left,margin-right都设置为auto,另外一个子元素仅仅只设置了margin-left,那么空间该如何分配.实测证明,在主轴方向上,有几个外边距(指margin-left,margin-right)设置为auto,那么就分几份.
.flex-container { display: flex; } .A { background: #FFE6CC; width: 100px; } .B { background: #FFF2CC; width: 100px; margin-left: auto; margin-right: auto; } .C { background: #F8CECC; width: 100px; margin-left: auto; } .D { background: #E1D5E7; width: 100px; }
上述代码显示效果如下:
B因为左右两个外边距都是auto,所以会各占一份,C因为只有左边距是auto,因此只占用一份.
2. flex列容器
上面的举例主轴都是水平方向.那么主轴是竖直方向的是否也适用呢?这里可以肯定回答: 列容器margin:auto仍然有效.不过需要把margin-left,margin-right改成设置 margin-top,margin-bottom为auto.
.flex-container { display: flex; flex-direction: column; height: 500px; } .A { background: #FFE6CC; width: 100px; } .B { background: #FFF2CC; width: 100px; margin-top: auto; } .C { background: #F8CECC; width: 100px; margin-bottom: auto; } .D { background: #E1D5E7; width: 100px; }
上述代码显示效果如下:
从示例中可以看出,margin:auto有空间占有效应. 使用margin:auto在某些情况下可以替代 flex:1, justify-content: space-between等的使用.这里不再展开阐释.
总结
margin:auto适合用来给flex容器的子元素间(在主轴方向)增加空间,适当的使用margin:auto可以简化dom的布局结构以及样式代码,提高编程效率.
参考资料
[1] w3c css-flexbox规范: https://www.w3.org/TR/css-flexbox-1/#auto-margins
[2] mdn关于margin:auto对flex容器的影响说明: https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-left
微信搜索 ''十八将君'',关注我的公众号和我一起成长~