FlexBoxで柔軟なレイアウトを作成します

FlexBox：CSSレイアウトパワーハウス

FlexBox、またはCSSフレキシブルボックスレイアウトモジュールは、1次元レイアウトを簡素化します。 コンテナにdisplay: flex（またはdisplay: inline-flex）を適用すると、FlexBoxルールに準拠した直接の子供がFlexアイテムに変換されます。これにより、柔軟なフォームや垂直センタリングなど、さまざまなUIパターンのコーディングが合理化されます。 アイテムを水平方向に並べるときは、グリッド上のflexboxを選択しますまたは垂直には選択しませんが、両方ではありません。グリッドは2次元配置（行と列）で優れています

FlexBox Fundamentals またはを使用した行または列）のために最高の統治をしました。 コンテナに

を追加するだけで、子供のフレックスフォーマットコンテキストを開始します。 注：古いブラウザには、

やflex-direction: row。 column以下の画像は、フレックスコンテナの直接の子供がどのようにフレックスアイテムになるかを示しています。これらは、要素または空でないテキストノードです。 それ以上のスタイリングがなければ、アイテムは高さ（最も高いものに基づいて）を等しく、水平方向に（または垂直の書き込みモードで垂直に）スタックし、間隔がありません。 彼らは容器に溢れているかもしれません。display: flex -webkit-flex -moz-flex

実用的なフレックスボックスアプリケーション

FlexBoxは複雑なレイアウトを簡素化します。これらの例を考えてみましょう：

1。メディアオブジェクトコンポーネント：

従来のメディアオブジェクト（テキストに沿った画像）は、以前はフロートとクリアフィックスハックを必要としていました。 FlexBoxはこれを排除します：

この簡潔なコードは同じ結果を達成し、画像サイズに動的に適応します。

2。柔軟なフォームコンポーネント：

<code class="language-css">.media__object { display: flex; }
.media__object img { margin-right: 20px; }</code>

レスポンシブフォームの作成は、FlexBoxでは簡単です。

shorthandプロパティ（、、および

を組み合わせて）アイテムのサイジングを制御します：

flex flex-grow入力が展開されますが、ボタンは固定された150pxのままです。 flex-shrinkおよびflex-basis値は比例していることを忘れないでください

<code class="language-css">div { display: flex; }
input[type="text"], button { border: 0; font: inherit; }
input[type="text"] { flex: 1 0 auto; } /* Expands to fill space */
button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } /* Fixed width */</code>

flex-grow flex-shrink

3。垂直センタリング：

垂直センタリングコンテンツは、

：

で簡素化されます このセンターは、コンテナ内のフレックスアイテムをセンターにします

4。グリッドのようなレイアウト：

グリッドはグリッドに最適ですが、flexBoxはflex-wrap: wrapおよびflex-basisおよびflex-grow：

を調整して適応可能なレイアウトを作成できます。

<code class="language-css">.media__object { display: flex; }
.media__object img { margin-right: 20px; }</code>

Flexbox vs.グリッド：適切なツールの選択

2次元レイアウトにグリッドを使用します。 FlexBoxを使用して、水平または垂直アライメントを必要とする単一軸レイアウトには使用しますが、両方ではありません。 多くの場合、プロジェクトは両方の手法を組み合わせて最適な結果を組み合わせています

さらなる学習：

css-tricks '"Flexboxの完全なガイド」およびFlexBox機能に深く掘り下げるためのその他のリソースに相談してください。

以上がFlexBoxで柔軟なレイアウトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。