3列レイアウトを実現するCSS3フレキシブルボックスフレックス

タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。

弾性ボックス自体は並んでいるので、幅を設定するだけです。

コンテナを使用して 3 つの列をラップし、コンテナの表示プロパティを flex に設定し、左列と右列の幅を 300px に設定し、中央の列に flex:1 を設定します。ここで、1 は幅の比率を表します。具体的な値は、他のボックスの flex 値によって異なります。ここでは他のボックスの幅が固定されているため、中央の列は自動的に埋められます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>3列レイアウト</title>
</head>
<スタイル タイプ="text/css">
    html*{
        マージン: 0;
        パディング: 0;
    }
    。容器{
        ディスプレイ: フレックス;
    }
    。左{
        背景色: 水色;
        幅: 300ピクセル;
        高さ: 100px;
    }
    。中心{
        高さ: 100px;
        フレックス: 1;
        背景: #f296ff;
    }
    。右{
        高さ: 100px;
        背景色: #6ee28d;
        幅: 300ピクセル;
    }
</スタイル>
<本文>
<!-- 高さが与えられたら、左右に 300 ピクセルの幅、中央に適応幅を持つ 3 列のレイアウトを記述します -->
<div class="コンテナ">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</本文>


</html>

効果は以下のようになります。

CSS3 フレキシブルボックスフレックスを使用して 3 列レイアウトを実装する方法についての記事はこれで終わりです。CSS3 フレックス 3 列レイアウトの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML CSS を使用して div またはテーブルを指定した位置に固定する方法

>>: Linux環境にJDK1.8をインストールする