Flexible Box Layoutでカラムレイアウト

たとえば、左右にカラム分けされたレイアウトを作りたいとします。これをCSSで実現する方法は何通りも存在します。

過去にCodeGridで紹介したような*table-cellやinline-blockを利用したカラムレイアウトであったり、単純にfloatを使用したものであったり、display: grid;であったり……。

方法は挙げればきりがないのですが、今回はCSS Flexible Box Layout Module（以下、Flexbox）に触れたいと思います。また、今回の記事では古いシンタックスには触れず、執筆時点での最新の仕様*を元に解説していきます。

CSS Flexible Box Layoutは文字通りレイアウトのための仕様です。CSS 2.1での仕様には、みなさんがよく知っている、次のような仕様があります。

• block layout
• inline layout
• table layout
• positioned layout

flex layoutもこれらのレイアウトモードのひとつで、より複雑なWebアプリケーションやWebページのレイアウトためにデザインされたものです。

なお、紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。

Flexboxを使うとどういったことができるのか

では、そのFlexboxを使うと、どんな悩みが解決されるのかを、筆者なりに考えてみました。

• 兄弟要素の高さを揃えたい
• 子要素の高さを親要素の高さにしたい
• table-cellで実装する際、position: relative;を指定したい
• カラムの順番を入れ替えたい
• 上下中央配置をしたい

これらはFlexboxを使わなくとも、実装が可能かもしれません。

たとえば、カラムの順番を入れ替えるといったことは、以前小山田が、「CSS再入門 display: tableの活用 3」で紹介した方法があります。

この方法では、display: tableを指定した要素に、directionプロパティを使用して文章の方向を逆にすることで、カラムを入れ替えるという方法がありました。とても有用ですが、筆者的には少しトリッキーな方法に思えました。

小山田も書いているように、このプロパティは本来はアラビア語やヘブライ語といった、右から読み進めるための言語のテキストの記述方向をコントロールするためのプロパティだからです。

その振る舞いを知っていれば、「なるほど。」と理解することができるのですが、知らない場合、そこで使われているdirectionプロパティの本来の使用目的から、文章を右から始まるようにしたいのかな？　と思ってしまうからです。

上下中央配置についても、古くから試行錯誤され、とてもトリッキーな手法が多く存在します。コードだけを一見しても、何をしているかが不明瞭なものが多くあります。

一方、Flexboxはレイアウトをするための仕様です。いろいろな配置がやりやすくなるメリットが注目されがちですが、それに加えて、CSSを見たとき、どういったレイアウトを作るためのコードなのかが、わかりやすくなるのもメリットだと筆者は考えています。

対応ブラウザ

対応ブラウザに触れておきます。最新のブラウザではほとんど使うことができますが、Internet Exprolerは11以降、Android 4.4以降でないと使えません。また現在でもSafariとiOS Safariには-webkit-のベンダープリフィックスが必要です。

• Can I use | Flexible Box Layout Module

古いブラウザは対応しておらず、どんなサイトでも使えるとは言いがたいですが、限られた環境では優れた実装となりうることもあります。

しかしながら、正直理解しづらい仕様だと思いますので、この記事で学んでいきましょう。

フレックスコンテナとフレックスアイテム

Flexboxを攻略するには、まず2つの重要な用語を押さえる必要があります。

フレックスコンテナとフレックスアイテムという用語は、Flexboxを理解する上で、一番大事な言葉です。

display: flex;（またはinline-flex）が指定された要素を「フレックスコンテナ（flex container）」と呼び、その子要素を「フレックスアイテム（flex item）」と呼びます。親要素がdisplay: flex;であれば、その子要素が自動的にフレックスアイテムとなります。

Flexboxに関連するプロパティは、名前がややこしく覚えづらいのですが、フレックスコンテナに指定できるプロパティと、フレックスアイテムに指定できるプロパティとで分けられるので、それぞれ解説していきます。

フレックスコンテナに指定できるプロパティ

まずは、フレックスコンテナとなる要素に指定できるプロパティです。

display

displayプロパティにflexもしくはinline-flexを指定することで、フレックスコンテナなります。そして、フレックスコンテナの直下の子要素が、自動的にフレックスアイテムになります。注意したいのは、孫要素はフレックスアイテムにはならないことです。

.container {
  display: flex; /* or inline-flex */
}

flex-direction

フレックスアイテムを縦並び、もしくは横並びにするかどうかの配置を指定します。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

それぞれのプロパティ値の意味は、次のようになります。

flex-wrap

通常、フレックスアイテムは1行にすべて収まろうとします。wrapやwrap-reverseを指定することで、フレックスアイテムがその行に収まりきらないときは、次の行へ折り返させることができます。また、折り返す際にどちらから始まるかも指定できます。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-directionによるフレックスアイテムの並ぶ方向や、flex-directionと同様に、flex-wrapも文字の表記方向によって、フレックスアイテムの折り返す方向が変わります。それぞれの組み合わせによって、どうフレックスアイテムがどう並ぶかを図示してみました。

まずは、文字の表記方向が左から右（ltr）になっていて、flex-direction: row;のときと、flex-direction: column;のときの、flex-wrapの各値を指定をした場合の図です。

図の左のflex-direction: row;のときは、縦軸の向きを変化させ、右のflex-direction: column;のときは横軸の向き変化させます。

次に、文字の表記方向が右から左（rtl）の場合を見てみましょう。

フレックスアイテムは文字の表記方向にそって並びます。図の左のflex-direction: row;のときは、縦軸の向きが変化するだけなので、特に難しくはないのですが、右のflex-direction: column;のときは、横軸の向きが変化するため混乱しそうです。ですが、あくまで文字の表記方向にそって折り返すのか、文字の表記方向とは逆に折り返すのかの差でしかありません。

flex-flow

flex-flowプロパティはflex-directionとflex-wrapのショートハンドプロパティです。初期値はrow nowrapです。

.container{
  flex-flow: <`flex-direction`> || <`flex-wrap`>;
}

justify-content

このプロパティでは、flex-directionで指定した配置を基準にして、フレックスアイテム全体の整列を指定します。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

プロパティ値の意味は、次のようになります。

align-items

このプロパティでは、フレックスアイテムごとの整列方向をまとめて指定できます。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

それぞれのプロパティ値の意味は、次の通りです。

align-content

flex-wrapプロパティの値に、wrapまたはwrap-reverseを指定した場合に、このプロパティは有効になります。複数行になったとき、フレックスアイテムをどのように揃えるかを指定できます。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

それぞれのプロパティ値の意味は、次の通りです。

フレックスアイテムに指定できるプロパティ

フレックスアイテム自身の振る舞いを指定するプロパティがいくつかあります。

align-self

align-selfプロパティは、個々のフレックスアイテムの整列を指定することができます。基本的には上揃えで、一部の要素だけ中央揃えにしたり、下揃えにしたりといった整列をするために使用します。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

それぞれのプロパティ値の意味は、次の通りです。

order

orderプロパティは、フレックスコンテナの中のフレックスアイテムの順序を指定します。orderプロパティの値（整数）の昇順で配置されます。値が同じ要素は、ソースコード内で現れる順に配置されます。

orderはHTMLの順序を入れ替えるわけではないので、文書の意味が変わってしまう心配はありません。

.item {
  order: <integer>;
}

flex-basis

フレックスアイテムの基本の長さを指定します。

そのほかのプロパティの指定値によって、設定された値の振る舞いが変わってきます。

後述するflexプロパティでflex-basisの指定を省略した場合、値は0が指定されます。

またautoと指定した場合、フレックスアイテムの中身のコンテンツの大きさに依存します。

flex-directionプロパティの値がrowやrow-reverseのときは、widthプロパティのように振る舞い、columnやcolumn-reverseのときは、heightプロパティのように振る舞います。

.item {
  flex-basis: <length> | auto;
}

flex-grow

フレックスアイテムが、ほかのフレックスアイテムに比べて、どれだけ伸びるかの比率です。フレックスコンテナがすべてのフレックスアイテムを収め切っても、まだ余りのスペースがある場合、各フレックスアイテムのflex-growプロパティに従い、自動的に利用可能な領域いっぱいまで伸びます。初期値は0です。

.item {
  flex-grow: <number>;
}

指定を見ただけでは直感的にわかりにくいのですが、おおむね次のような挙動になります。

このプロパティの詳細については、次回さらに詳しく解説します。

flex-shrink

フレックスアイテムが、ほかのフレックスアイテムに比べて、どれだけ縮むかの比率です。フレックスコンテナがflex-wrap: nowrapで、しかも、すべてのフレックスアイテムを収めきれない場合、各フレックスアイテムのflex-shrinkプロパティに従い、ちょうど格納できるように、自動的に縮みます。初期値は1です。

.item {
  flex-shrink: <number>;
}

このプロパティも指定を見ただけでは直感的にわかりにくいのですが、おおむね次のような挙動になります。

flex-growと併せて、flex-shrinkも次回、さらに詳しく解説します。

flex

flexプロパティはflex-grow flex-shrink flex-basis のショートハンドプロパティです。

flexプロパティの初期値は0 1 autoです。

.item {
  flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
}

それぞれの値は省略可能です。また、キーワードでの指定も可能です。そのような省略した書き方をした際は、自動的に決められた値に設定されます。その指定は、次のようになっています。

まとめ

今回はflexible boxの仕様にあるプロパティを一通り説明しました。まずは、それぞれのプロパティで何が設定できるのかを理解しないと、さらにそれらを組み合わせた実装は理解できません。

ですが、そのうちflex-growとflex-shrinkは、1行に収まるように、伸びたり、縮んだりするという概要はわかったと思いますが、どのように計算されて収まるかの計算は、やや複雑です。

次回はその2つのプロパティと取り上げて解説します。