CSS flex 複数列レイアウト

基本的な3列レイアウト

。容器{
        ディスプレイ: フレックス;
        幅: 500ピクセル;
        高さ: 200px;
    }
    。左{
        フレックス：1;
        背景: 赤;
    }
    。真ん中{
        フレックス：1;
        背景: 緑;
    }
    。右{
        フレックス：1;
        背景: 青;
    }
<div class="コンテナ">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

左と中央は固定幅、右は適応幅の3列

    。容器{
        ディスプレイ: フレックス;
        高さ: 300px;
    }
    。左{
        フレックス: 0 0 100px;
        背景色: 赤;
    }
    。真ん中{
        フレックス: 0 0 100px;
        背景色: 緑;
    }
    。右{
        フレックス：1;
        背景色: 青;
    }
  <div class="コンテナ">
    <div class="left">qqq</div>
    <div class="middle">qqq</div>
    <div class="right">wwww</div>
</div>

ブラウザウィンドウを縮小した後

左右は固定、中央は適応型

  。容器{
        ディスプレイ: フレックス;
        高さ: 300px;
    }
    。左{
        幅: 100ピクセル;
        背景色: 赤;
    }
    。真ん中{
        フレックス: 1;
        背景色: 緑;
    }
    。右{
       幅: 100ピクセル;
        背景色: 青;
    }
   <div class="コンテナ">
    <div class="left">qqq</div>
    <div class="middle">qqq</div>
    <div class="right">wwww</div>
</div>

ブラウザウィンドウを縮小した後

9グリッドレイアウト

。容器{
        ディスプレイ: フレックス;
        高さ: 300px;
        幅: 300ピクセル;
        flex-direction: 列;
    }
    。行{
        ディスプレイ: フレックス;
        高さ: 100px;
    }
    。左{
        フレックス: 1;
        高さ: 100px;
        境界線: 1px 実線の赤;
    }
    。真ん中{
        フレックス: 1;
        高さ: 100px;
        境界線: 1px 緑;
    }
    。右{
        フレックス: 1;
        高さ: 100px;
        境界線: 1px 青
    }
    <div class="コンテナ">
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</div>

聖杯レイアウト

  *{
        マージン:0;
        パディング:0;
    }
    。容器{
        ディスプレイ: フレックス;
        flex-direction: 列;
        最小高さ: 100vh;
        コンテンツの両端揃え: スペースの間;
    }
    。ヘッダ{
        背景: 赤;
        フレックス: 0 0 100px;
    }
    。コンテンツ{
        ディスプレイ: フレックス;
        フレックス：1;
    }
    .content-left{
        フレックス: 0 0 100px;
        背景: 緑;
    }
    .コンテンツ右{
        フレックス: 0 0 100px;
        背景: ピンク;
    }
    .content-middle{
        フレックス：1;
    }
    .フッター{
        背景: 黄色;
        フレックス: 0 0 100px;
    }
    <div class="コンテナ">
    <div class="header">ヘッダー</div>
    <div class="content">
        <div class="content-left">左</div>
        <div class="content-middle">中央</div>
        <div class="content-right">右</div>
    </div>
    <div class="footer">フッター</div>
</div>