ホームページ > 記事 > ウェブフロントエンド > CSS3 柔軟なレイアウト_html/css_WEB-ITnose
CSS3 柔軟なレイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:021306ブラウズ
flexbox は CSS3 で提案されたページレイアウトモジュールです。 Flexbox はリストを水平または垂直に配置し、拡張可能なスペースを埋めることができます。フレックス コンテナをネストすることで、もう少し複雑なレイアウトを実現できます。
フレックスボックスを使用すると、柔軟なレイアウトを簡単に作成できます。これにより、モバイル デバイス上のコンテナ内で要素を拡張および縮小できるため、3 列レイアウトなどの一般的なレイアウトを簡単に実装できます。
フレキシブル コンテナと弾性ブロック
フレックス コンテナには、左側のコンテンツと右側の 3 つの弾性ブロックが含まれています。
ディスプレイをフレックスに設定して、ブロックをフレキシブルブロックにすることができます。
フレックスフローを設定して、エラスティックブロックのレイアウト方向を決定できます。 行、水平レイアウトに設定し、列、垂直レイアウトに設定します。単一の行。図に示すように、ラップを設定して複数の行に配置できます。
水平レイアウトでは、各ブロックの幅を指定する必要があります。300px などの固定幅にすることも、比例幅に設定することもできます。 width (flex:1 など)。指定された領域を占有することを意味します。幅は、幅を超えた残りのスペースの N 分の 1 であり、N はコピーの総数です。
その高さはフレックスコンテナの高さです。
写真に示すように:
垂直高さも同様の状況です。
包括的な例:
<!DOCTYPE html><html><head><style> .container{ background:#a1a1a1; display:flex; flex-flow:row; height:500px;}.main { width: 60%;}.left { flex: 1; background:pink;}.right { flex: 2; background:pink;}</style></head><body><div class="container"> <nav class="nav left">…</nav> <section class="main"> Winter comes after autumn.It snows heavily here.... </section> <nav class="nav right">…</nav></div></body></html> 効果:
ブラウザのサポート: より幅広いブラウザをサポートするには、フレックスボックスの古い構文バージョンのサポートを追加することを検討する必要があります。上記の例は FF23.0.1 で正常に実行されます。 。
参考英語ドキュメント: http://helephant.com/2013/03/23/css3-flexbox-layout/