CSS3 フレックス レイアウトの概要 application_html/css_WEB-ITnose

前回の記事では flex ボックスの構文を紹介しましたが、この記事では flex を使って実際にレイアウトしていきます。たとえば、アダプティブな 3 列の等高レイアウトを実装するには、% パーセンテージを指定した inline-block または float を使用していました。ただし、マージン/パディングの計算はより複雑で、加算、減算、および維持が面倒です。フレックス ボックス モデルを使用する方がはるかに簡単です。

最初に、左右のサイドバーに 220 ピクセルの固定幅で元の HTML 構造を作成します

* { margin: 0; padding: 0; }#header, #footer { width: 100%; }#left, #right { width: 220px; }<div id="header">header</div><div id="page">    <div id="main">main</div>    <div id="left">left</div>    <div id="right">right</div></div><div id="footer">footer</div>

次にコンテンツを追加しますコンテナ (#page) フレックス ボックス モデルに設定します: #page { display: flex; }

真ん中の main は単なる div なので、 width は適応的ではないようですが、非常に単純です #main { flex: auto; を設定するだけです。 2つのサイドバーがflexで設定されていないため、残りの幅はmain専用になります

mainの位置を調整するのは非常に簡単です。 #main { … order: } を設定するだけで十分です。もちろん、同時に #right { … order: } を right に設定することを忘れないでください。 Left は設定されておらず、デフォルトは 0 です。

DOM 内で left->main->right をソートするだけで十分ではないのかと疑問に思われるかもしれません。なぜ main に配置されているのでしょうか? ->左ですか？ ->そうですか？確かに DOM の順序を調整しても同じ効果が得られますが、メインを上位に配置するほど SEO 検索に適しています。実際、これに対する標準的な答えはありません。 left の内容も同様に重要であると考える場合は、left->main->right の DOM 順序は問題ありません。

あとは最後のステップだけです。フッターを一番下に配置し、ページ部分を持ち上げます。まずhtmlとbodyの高さを100%に設定して全画面表示の準備をします。ボディにはヘッダー、ページ、フッターが含まれるため、ボディにフレックス ボックス モデルを設定し、3 つのサブ要素がボディ内で縦に配置されるように flex-direction: column を設定します。 ; flex-direction: column; }

最後に、ページの拡張は上記のメインと同じです。ヘッダーとフッターが設定されていないためです。フレックスする場合、残りの高さはページ専用になります。

* { margin: 0; padding: 0; }html, body { height: 100%; }body {    display: flex;    flex-direction: column;}#header, #footer { width: 100%; }#page {    display: flex;    flex:auto;}#left, #right { width: 220px; }#right { order: 2; }#main {    flex: auto;    order: 1;}

適応型 3 列の等高レイアウトのアイデアを要約すると、本文は垂直フレックス モデルを適用してヘッダー、ページを許可します。 、フッターは縦方向に配置されます。ページ部分のみ flex:auto があり、高さが適応されます。ページ部分に flex モデルが適用され、コンテンツ、左列、右列が水平に配置され、コンテンツ部分のみ flex:auto が設定され、幅が適応されます。 SEO 最適化のためにコンテンツ部分が DOM の左右のサイドバーに配置されている場合は、順序を調整してください。

その他のレイアウト例については、「フレックスボックスで解決する」を参照してください。

フレックス ボックスを使用すると、等比率レイアウトを簡単に実装できます。

.Grid { display: flex; }.Grid-cell { flex: 1; }<div class="Grid">  <div class="Grid-cell">…</div>  <div class="Grid-cell">…</div>  <div class="Grid-cell">…</div></div>

固定比率の一部とアダプティブ レイアウトの残りを実装することもできます:

コメント領域レイアウト:

すべてコードページに記載されており、非常にシンプルなので自分で参照できます。

概要

flex はレイアウトに非常に便利です。もともと inline-block と float を使用して書かれた大量の醜くて保守が難しいコードも、flex を使用すると非常にエレガントに実装できます。 ? 垂直方向のセンタリングはすべて雲です。必要なのは時間だけです。それらの古いブラウザが死んだとき、フレックスボックスの春が来ます。