ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 柔軟なレイアウト_html/css_WEB-ITnose

CSS3 柔軟なレイアウト_html/css_WEB-ITnose

WBOY
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/

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。