フレキシブボックス（flex）のレイアウト

WEBページの標準のレイアウトではコードが書かれた順番に縦に並ぶようになっています。昨今、スマホ対応のHPのためflexを用いたデザインが主流になり、flexを操作できるとよりスマートなHPが出来上がります。今回はflexについて深掘りしていきたいと思います。

flexの仕様

<div class="container">
  <div class="item"><p>A</p></div>
  <div class="item"><p>B<br>フレックス</p></div>
  <div class="item"><p>C</p></div>
</div>

　このようなコードがあったとしましょう、わかりやすく背景に色だけつけて表示させてみたいよと思います。

このように縦一列で並びます。そこでこれらclass=”item”にflexをかけてみたいを思います。そうすると

.container{
  display: flex;
}

class=”item”は.containerの子要素なので.containerにflexを指定します。

flexは子要素に効くものなので注意です。flexをかけた結果がこちら

とてもすっきりしたと思います。何も指定しないでflexをした場合コンテンツの幅に合わせて横並びになります。今回の場合AとCは１文字なので極小、Bはフレックスという文字がある分大きなっています。

このようにflexは幅に合わせて自動的に横並びとなります。

幅の指定方法

display: flexにて横並びにすることができましたが、すべて端に寄ってしまいレイアウトがすこし変です。そこで子要素に対して大きさを調整する方法をご紹介します。

このようにすべて均等に横並びにしたい場合以下のようなコードを書いてください。

.item{
  flex: 1;
}

itemにたいしてすべての幅の比率を１，均等になるようになります。