flexboxによるレイアウト
最終更新 2018/12/07

flexboxによるレイアウト

かつてはtableを使ったレイアウトが主流で、 そこからfloatやdisplay: inline-block;、display: table;などに変遷してきた。 その次のレイアウトのひとつとしてあげられるのがflexbox(フレックスボックス)だ。

例として2カラムレイアウトを作ってみる。

基本構造はとてもシンプルで、親(フレックスコンテナという)をひとつ用意して、その中に子(フレックスアイテムという)を2つ用意して、 親にdisplay: flex;を指定するだけ。

カラム1
カラム2

見てのとおり、フレックスアイテムはデフォルトでは「中身のコンテンツに応じた横幅」になる。 これはdisplay:inline-block;と同様であるが、改行した時に5pxの余分な余白が生じたりしない点で、 flexboxのほうが(少なくともレイアウトという点では)優れている。

また、justify-content:を使えばtext-align:やfloat:のように、特定の位置に寄せることができる。

カラム1
カラム2
カラム1
カラム2
カラム1
カラム2
カラム1
カラム2
カラム1
カラム2

コンテンツの領域を余白いっぱいに引き伸ばす場合は、フレックスアイテムにflex: 1;を指定する。

カラム1
flex: 1;
カラム2
flex: 1;
flex:は、flex-grow:とflex-shrink:、flex-basis:をまとめて指定できるプロパティで、 flex: 1;のように値をひとつ指定した場合はflex-growを指定したことになる。 ただし、flex: 1;とflex-grow: 1;はイコールではなく、というのもflexで値をひとつ指定した場合、自動的にflex-basisが0になる仕様なので、 flex: 1;と同じレイアウトにするためには、flex-grow: 1;とflex-basis: 0;をあわせて指定する必要がある。

片方のカラムの幅を固定したい場合は、そのフレックスアイテムにflex-basis:を指定する。 ちなみに普通にwidth:で指定しても意図した通りに固定される。

カラム1
flex: 1;
カラム2
flex-basis: 200px;

左右のカラムで高さが異なる時に、小さいカラムを大きいカラムに対して上下中央寄せする場合は、 フレックスアイテムにalign-self: center;を指定する。

カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;

これは、display: table-cell;とvertical-align: middle;を指定する方法と同じレイアウトになるが、 vertical-align: middle;は「内包する要素が上下中央寄せになる」のに対して、 align-self: center;は「自分自身が上下中央寄せになる」という点で異なる。

また、このレイアウトをリピートして一覧を作成するようなケースにおいて、 たとえば偶数行だけ左右反転したいような場合、 floatレイアウトの場合はleftとrightを入れ替えていたが、 flexboxの場合は反転したいフレックスコンテナにflex-direction:row-reverse;を指定する。

カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;
カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;
カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;

あるいは、スマホサイズでカラムレイアウトを解除して縦積みにしたい場合、 flex-direction: column;を指定することが考えられるが、 シンプルに親のdisplayをblockにすることで対応できる。

カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;
カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;
カラム1
align-self: center;
flex-basis: 140px;
カラム2
flex: 1;
height: 200px;

3カラムレイアウトもまったく同じ。 たとえば、左右を60pxで固定する場合はこんな感じ。

カラム1
flex-basis: 60px;
カラム2
flex: 1;
カラム3
flex-basis: 60px;

ブロック要素を親要素の上下左右中央に配置する際も、flexboxで対応できる。

横並びで多段にするとき、親にflex-wrap: wrap;を指定することで高さを揃えることができる。

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト