このエントリーでは、flexboxでリキッドレイアウトを表現する方法をお伝えします。可変カラム＋固定カラムが横並びになるレイアウトにするとき使えるスタイルです。

リキッドレイアウトとは

リキッドレイアウトは、可変カラムと固定カラム構成の名称です。ブラウザのサイズやデバイスの違いを柔軟に表示する概念です。

2カラム、あるいは3カラム構成からなるレイアウトが一般に見られるのではないでしょうか。

たとえば、サイドメニューが固定幅で、メインコンテンツが可変幅などが代表的です。

flexboxのリキッドレイアウトが使えるケース

• レスポンシブデザインに最適
• 固定、可変する要素があるとき
• フォームのラベルと入力要素が並ぶとき

使い方（2カラム）

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;を適用することでフレックスコンテナボックスにすることが目的です。それにより小要素は横並びになります。

続いて、sideクラスにwidth: 300px;の横幅を与えて固定値とします。

最後に、mainクラスにflex: 1;の指定で可変を実現します。flexプロパティはflexのスタイルカスタマイズする省略プロパティです。CSSショートハンドといいます。リキッドレイアウトを実現するにあたって厳密にプロパティを指定する必要性が無いため割愛しますが、気になる方は別途調べるとよいでしょう。[flex – CSS: カスケーディングスタイルシート]

まとめ

以上がflexboxでリキッドレイアウトにする方法でした。必要なHTMLは、梱包要素と固定カラム、可変カラムです。必要なCSSは、梱包要素にdisplay: flex;と固定カラムにwidth: ~~px;、可変カラムにflex: 1;と覚えてください。

きっと活用できるケースがあると思い記事にしました。マークアップの一助となれば幸いです。