CSS3 フレックスボックス自動記入の書き方を詳しく解説

<スタイル タイプ="text/css">
    .flexコンテナ{
        幅:100%;
        高さ: 100%;
        位置: 絶対;
        左:0px;
        上:0px;
        ディスプレイ: フレックス;
        flex-direction: 列;
    }
    .flex1 {
        幅: 100%;
        高さ：8rem;
        フロート: 左;
        背景: #f00;
    
    }
    .flex2 {
        幅: 100%;
        高さ: 4rem;
        フレックス：1;
        フロート: 左;
        背景: #000;
    }
   .flex3 {
        幅: 100%;
        高さ：7rem;
        フロート: 左;
        背景: #ccc;
    }    
</スタイル>
<div class="flexcontainer">
    <div class="flex1"></div>
    <div class="flex2"></div>
    <div class="flex3"></div>
</div>