flexboxでリキッドレイアウト（固定＋可変）にする方法

 以下は、2カラムレイアウトを実現するためのHTML/CSSの記述例です。それぞれのレイアウトを実際に使ってご覧ください。

<div class="wrapper">
    <div class="side">
    <!-- 固定カラム -->
    </div>
    <div class="main">
    <!-- 可変カラム -->
    </div>
</div>

HTMLには、梱包要素にwrapperクラス、固定カラムにsideクラス、可変カラムにmainクラスを使用することができます。

.wrapper {
  display: flex;
}
.side {
  width: 300px;
}
.main {
  flex: 1;
}

CSSでは、まず梱包要素のwrapperクラスにdisplay: flex;を適用することで、フレックスコンテナボックスにすることが目的です。これにより、内部の要素が横並びに配置されます。