Flexboxの仕様と柔軟なボックスレイアウト

Webサイトのコーディングで頭を悩ませる、上下中央揃えや、要素の高さを合わせるなどのボックスレイアウトを「Flexbox」の導入で解決しようという方が多いかと思います。今回はプロパティやベンダープレフィックスなど、“今”使うためのFlexboxの対応状況、記述についてご紹介します。

DEVELOPER

M.S.

Flexboxとは

Flexboxは、Flexコンテナ（親要素）とFlexアイテム（子要素）で構成されています。
親要素にdisplay:flexを設定することによって、flexコンテナ、その子要素をFlexアイテムとされます。

Flexboxは正式にはFlexible Box Layout Moduleといい、ボックスレイアウトを柔軟にする新しいCSSのレイアウトモードです。
Flexbox自体は2009年にdisplay:box、それ以降にはdisplay:flexboxという形がドラフト化されてきましたが、仕様は頻繁に変わり、使い勝手や実用性はあまりよくありませんでした。

最近ではdisplay:flexの形で仕様が安定し、モダンブラウザでもサポートされてすでに大手プロダクトでもグリッドレイアウトやナビゲーションなどに使用されています。

Flexboxの仕様

前記の通り、Flexboxの現在の仕様はdisplay:flexとなります。
現在のIE11を含むChromeやSafariなどモダンブラウザの最新版ではすでにサポートされておりベンダープレフィックスなどの必要はありません。
古いバージョンへの対応としては、AndroidOS4.3以下の標準ブラウザではdisplay:box、IE10ではdisplay:flexbox、またベンダープレフィックスやbox、flexbox仕様のプロパティを記述する必要があります。

IE8や9への対応として fleibility.js というスクリプトが存在します。
こちらの詳細は下記参考サイトをご覧ください。
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！

Flexコンテナのプロパティ

以下display:flexを使用したコードをベースに、基本的なFlexboxのプロパティをご紹介します。

.flex-container{
display: flex;
}

古いバージョンへの対応

.flex-container{
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
display: -webkit-flex; /* Safari6.1以降 */
}

flex-direction
アイテムの並びと、並びの方向を指定
row：横並び/左→右（初期値）
row-reverse：横並び/右→左
column：縦並び/上→下
column-reverse：縦並び/下→上

.flex-container{
display: flex;
flex-direction: column-reverse;
}

古いバージョンへの対応

.flex-container{
-ms-flex-direction: column-reverse; /*IE10*/
-webkit-box-direction: reverse; /* Android4.3以下、Safari3.1〜6.0 */
-webkit-flex-direction: column-reverse; /* Safari6.1以降 */
}

justify-content
アイテムの横方向の位置揃え
flex-start：左揃え（初期値）
flex-end：右揃え
center：左右中央揃え
space-between：左右揃え
space-around：各アイテム左右に均等な余白

.flex-container{
display: flex;
justify-content: space-between;
}

古いバージョンへの対応

.flex-container{
-ms-flex-pack: justify; /*IE10*/
-webkit-box-pack: justify; /* Android4.3以下、Safari3.1〜6.0 */
-webkit-justify-content: space-between; /* Safari6.1以降 */
}

flex-wrap
アイテムの改行設定
nowrap：幅に合わせて縮む、改行させない（初期値）
wrap：改行させる
wrap-reverse：逆方向に改行させる

.flex-container{
display: flex;
flex-wrap: wrap;
}

古いバージョンへの対応
※AndroidOS4.3以下の標準ブラウザ、Safari6.0以前に対応したプロパティが存在しないため省略

.flex-container{
-ms-flex-wrap: wrap; /*IE10*/
-webkit-flex-wrap: wrap; /* Safari6.1以降 */
}

align-items
アイテム全体、縦方向の位置揃え（flexコンテナの内側上下を調整）
flex-start：上揃え（初期値）
flex-end：下揃え
center：上下中央揃え
baseline：アイテム内要素（テキスト等）のラインを揃える
stretch：上下揃え（高さいっぱい）

.flex-container{
display: flex;
flex-wrap: wrap;
align-items: center;
}

古いバージョンへの対応

.flex-container{
-ms-flex-align: center; /*IE10*/
-webkit-box-align: center; /* Android4.3以下、Safari3.1〜6.0 */
-webkit-align-items: center; /* Safari6.1以降 */
}

align-content
アイテム自体の縦方向の位置揃え（flexアイテムの上下を調整）
flex-start：上揃え（初期値）
flex-end：下揃え
center：上下中央揃え
stretch：上下揃え（高さいっぱい）
space-between：上下揃え
space-around：アイテム上下に均等余白

.flex-container{
display: flex;
flex-wrap: wrap;
align-content: center;
}

古いバージョンへの対応
※AndroidOS4.3以下の標準ブラウザ、Safari6.0以前に対応したプロパティが存在しないため省略

.flex-container{
-ms-flex-line-pack: center; /*IE10*/
-webkit-align-content: center; /* Safari6.1以降 */
}

flex-flow
flex-directionとflex-wrapの省略形で、2つを同時に設定できる
flex-flow:[flex-direction] [flex-wrap];

.flex-container{
display: flex;
flex-flow: row-reverse wrap;
}

古いバージョンへの対応
※AndroidOS4.3以下の標準ブラウザ、Safari6.0以前に対応したプロパティが存在しないため省略

.flex-container{
-ms-flex-flow: row-reverse wrap; /*IE10*/
-webkit-flow: row-reverse wrap; /* Safari6.1以降 */
}

Flexアイテムのプロパティ

order
アイテムの順番を入れ替える
order:-1にした場合、前要素のひとつ手前に移動

.flex-container{ display: flex;}
.item1{ order: 2;}
.item2{ order: 3;}
.item3{ order: 1;}

古いバージョンへの対応

.item1{
-ms-flex-order: 2; /*IE10*/
-webkit-box-ordinal-group: 2; /* Android4.3以下、Safari3.1〜6.0 */
-webkit-order: 2; /* Safari6.1以降 */
}

align-self
各アイテムの縦方向の位置揃え
flex-start：上揃え（初期値）
flex-end：下揃え
center：上下中央揃え
stretch：上下揃え（高さいっぱい）
baseline：アイテム内要素（テキスト等）のラインを揃える

.flex-container{ display: flex;}
.item1{ align-self: flex-end;}
.item2{ align-self: stretch;}
.item3{ align-self: flex-start;

古いバージョンへの対応
※AndroidOS4.3以下の標準ブラウザ、Safari6.0以前に対応したプロパティが存在しないため省略

.item1{
-ms-flex-flex-item-align: end; /*IE10*/
-webkit-align-self: flex-end; /* Safari6.1以降 */
}

flex
コンテナ内、アイテム幅の割合を設定

.flex-container{ display: flex;}
.item1{ flex: 1;}
.item2{ flex: 2;}
.item3{ flex: 3;}

古いバージョンへの対応

.item1{
-ms-flex: 1; /*IE10*/
-webkit-box-flex: 1; /* Android4.3以下、Safari3.1〜6.0 */
-webkit-flex: 1; /* Safari6.1以降 */
}

まとめ

いかがでしたか？
今まで頭を悩ませていたレイアウトが、Flexboxを使って安定した形で簡単にできるようになったことがわかります。
今回は、現状の仕様とともに主に使うプロパティを簡単にご紹介しましたが、この他にもいろいろなプロパティや使い方があり、Flexboxを使ったCSSコーディングが主流になっていくと思います。
私も慣れるまでにまだまだ時間がかかりそうですが、Flexboxを積極的に使って作業の効率化をしていきたいです。