ホームページ > 記事 > ウェブフロントエンド > 自動マージンを使用してフレックスボックスをレイアウトしてください。そして、少し学術的な比較研究: 自動マージンと align-self_html/css_WEB-ITnose
自動マージンを使用してフレックスボックスをレイアウトしてください。そして、少し学術的な比較研究: 自動マージンと align-self_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:00871ブラウズ
共通マージン: 0 auto; 実際には、自動マージンはこれ以外にも使用できます。フレックスボックスレイアウトでは、自動マージンは左右の位置合わせと水平方向の中央揃えだけでなく、同じコンテナ内で複数の位置合わせ方法を同時に実現することもできます。このレイアウト機能は非常に強力です。 。多くの場合、自動マージンは、シリーズの配置プロパティである align および justify よりも簡潔かつ賢明であり、エラーが発生しにくくなります。
フレックスボックス レイアウトにおいて、自動マージンが非常に強力な機能を持つ理由は、残りのスペース (空きスペース) をすべて「食べる」ことができるからです 。残りのスペースがなければ、justify-content 属性や align-self 属性は使用できず、当然無効になります。
いくつかの例を見てみましょう~
例 1: フレックス要素の応答性の高い水平方向および垂直方向のセンタリングを実装します
<head> <style> .container { height: 300px; background-color: lavender; display: flex; flex-wrap: wrap; } .item { background-color: cornflowerblue; width: 100px; height: 50px; margin: auto; text-align: center; line-height: 50px; } </style></head><body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 1</div> <div class="item">Item 6</div> </div></body> Example 1-1.png ウィンドウ幅 800px
Example 1-2.pngウィンドウ幅 350px
例 2: 同じフレックス コンテナ内で複数の位置合わせメソッドの共存を実現します。特にナビゲーション バーやフォーム バーに適しており、一部の要素を左に配置し、その他の要素を右に配置できます。
<head> <style> .nav { height: 100px; background-color: lavender; display: flex; flex-wrap: wrap; } .item { background-color: cornflowerblue; width: 100px; height: 50px; text-align: center; line-height: 50px; margin: auto 0; } .other { margin-left: auto; } .content { background-color: mistyrose; font-size: 5em; width: 100%; height: 300px; text-align: center; line-height: 300px; } </style></head><body> <div class="nav"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item other">Item 6</div> </div> <div class="content">CONTENT</div></body> Example 2-1.png
同様に、自動マージンを使用すると、以下に示すような一般的な効果をより簡単に実現できます。画像は http://www.flexboxpatterns.com/home から引用したものです。自動マージンを使用すると、元の効果は得られません。
例 2-2.png
例 2-3.png
例 2-4.png
自動マージンアルゴリズムに関するいくつかの考え
以下の内容はちょっと学者の皆さん、心の準備をしてください〜Flex レイアウト アルゴリズムの自動マージンの配置原理には次のような説明があります。原文は英語ですが、正確に翻訳するように努めています:
アルゴリズムの説明の最後の文、「この要素の外側の十字サイズが、それが配置されている屈曲線の十字サイズと等しくなるように、相対方向のマージン値を設定します」がよくわかりません。 「英語が得意な方は、まず助けてください。」 翻訳が正確かどうかを確認してください。主軸の方向に。
残りのスペースなど 正の数の場合、残りのスペースは主軸方向に自動マージンでフレックス要素に均等に分配されます。
- 残りのスペースが負の数の場合、主軸方向の自動マージンを「0」に設定します。
交差軸方向
自動マージンを持つ要素の交差軸方向の外側の十字サイズ（計算時に自動マージンを「0」として計算します）がそのサイズより小さい場合フレックスラインの位置の交差サイズに応じて、残りのスペースが自動マージンに均等に分配されます。
- それ以外の場合、軸交差方向のブロックスタート方向またはインラインスタート方向のマージンが自動の場合は「0」に設定してください。この要素の外側の十字サイズが、配置されているフレックス ラインの十字サイズと等しくなるように、相対方向のマージン値を設定します。
追加知識:
CSS 書き込みモードでは、ブロック開始方向は、次のように定義されたブロック フロー方向の開始終了です。書き込みモード属性(writing-mode)に、上から書き込みモードの場合は先頭、左から右書き込みモードの場合は左端、右から左書き込みモードの場合は と定義されます。は右端として定義され、インライン開始方向はインラインベース方向属性によって定義され、左から右への開始端は左端として定義され、右から左への開始端は右端として定義されます。
文字通りに分析すると、今の最後の文の意味は、flex 要素が超高 10px の場合、相対方向のマージンが -10px に設定され、それによって外側の十字のサイズが 10px 減少して等しくなるということのようです。フレックスラインのクロスサイズに影響しますが、現時点ではこの理解を確認する方法がわかりません。確認できる結果は、交差軸方向の margin: auto と align-self: center が異なる効果を生み出すということです。
例 3: auto margin と align-self: center の違い。
<head> <style> .container { height：300px; margin: 0 auto; } .box { width: 160px; height: 300px; display: flex; flex-direction: column; background-color: cornflowerblue; padding: 10px; margin: 30px auto; } .item { background-color: lavender; height: 50px; margin-top: auto; margin-bottom: auto; align-self: flex-start; text-align: center; line-height: 50px; padding-left: 10px; padding-right: 10px; } .a { margin: auto; } .b { align-self: center; } </style></head><body> <div class="container"> <div class="box">margin: auto <div class="item a">Item_1</div> <div class="item a">Item_2_LongLongLongLongLongLong</div> <div class="item a">Item_3</div> </div> <div class="box">align-self: center <div class="item b">Item_4</div> <div class="item b">Item_5_LongLongLongLongLongLong</div> <div class="item b">Item 6</div> </div> </div></body> Example 3.png
この例では、2 つの青いボックスの交差軸は水平方向にあり、上のボックスの要素は水平方向の中央揃えに margin: auto を使用し、下のボックスの要素は align を使用します。 -self : center は水平方向のセンタリングを実行します。 margin: auto (margin-left: auto または margin-right: auto も実装できますが、通常の長さの要素の水平方向のセンタリングに影響します)。超長い要素のブロック開始方向を設定できます。 、左マージンを '0' にすると、要素が完全に読みやすくなりますが、 align-self: center は長すぎる要素を絶対に中央に配置します。読みやすさが必要ない場合は、これがより有利になる可能性があります。
何？それでも verticle-align: middle と比較しますか?申し訳ありませんが、verticle-align と Baseline の決定については明日までお話しましょう~ 次回、次回^_^
これらの例を見た後は、自動マージンの使用方法を忘れないでください。 最後に、しましょう。思い出させてください:
- 自動マージンは現在のフレックス項目のみに適用され、その子要素には影響しません。
- フレックスベースとフレキシブル長さ(メインサイズとクロスサイズ)を計算する場合、自動マージン値は0です。
- 自動マージンは、justify-content および align-self よりも優先されます。対応する方向の残りのスペースは自動マージンに割り当てられているため、justify-content と align-self は効果がありません。
- 自動マージンは、オーバーフローしたフレックス項目には効果がありません。
終わり
//転載する場合は作者にご連絡ください//
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。