はじめに

先日、旧IEのサポートが切られました。
flexboxは便利らしいけど、まだまだ実用性が無いンゴねぇ......残念残念。
と言って逃げる訳にはいかなくなりそうです。

flexboxを今まで見てみぬフリしてきた私ですが「いい加減覚えなきゃ......」と思い、動作を試せるページを作成しました。

本稿では「flexboxの大まかなポイント」と「作成したページ」を紹介します。
特に私と同じようにflexboxについての記事を読んでもよく分からなかった人のお役に立てれば幸いです。

[作成したflexbox動作確認ページ]
http://nekoneko-wanwan.github.io/demo/flexbox/

[目次]

はじめに
これだけ押さえておけば勝てる！
できれば知っておきたいこと
flexbox動作確認ページについて
終わりに

これだけ押さえておけば勝てる！

プロパティがたくさんあるせいか、個人的にflexboxは取っ付きにくい印象があります。しかし、押さえておくべきポイントはそう多くありません。とりあえず以下を知っておけば9割方勝ったようなものです！負けたらｺﾞﾒﾝﾈ

flexboxは「親」と「子」で構成される
flexboxスタイルを使うには、「親」にflexboxを使うぞ！と指定するだけ（displayプロパティを使用）
「親」には「子」をどんな風にレイアウトさせるかのルールを設定する
「子」には、その子に適用させたい個別のスタイルを設定する

以下ざっと順番に見ていきたいと思います。
また以降は「親」⇒コンテナ、「子」⇒アイテムと表現します

flexboxはコンテナとアイテムで構成される

まずはhtmlを入れ子にします。

flexbox.html

<div class="flexbox-container">
  <div class="flexbox-item"></div>
  <div class="flexbox-item"></div>
  <div class="flexbox-item"></div>
</div>

flexboxスタイルを使うには、flexコンテナを定義するだけ

flexboxスタイルを使うには、flexコンテナの定義が必要です。
flexコンテナの定義は、コンテナとなる要素にdisplay: flex || inline-flex; を指定するだけです。
flexコンテナの子要素は自動的にflexアイテムとして見なされます。
flexコンテナとflexアイテムにはデフォルト値があり、これだけでスタイルが自動設定されます。

flex.css

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

後は好きなように初期レイアウトをカスタマイズしていく設定になります

コンテナにアイテムのレイアウトルールを設定する

flexコンテナには、flexアイテムをどのようなルールでレイアウト・配置するかのスタイルを設定します。
※ルールにより別途flexアイテムに指定したスタイルが無視されることもあります（例えばfloatは指定しても無視されます）。

flexコンテナに設定できる主要スタイル

プロパティ	概要
display	コンテナに必ず指定する指定すると子要素はアイテムと見なされる
flex-direction	アイテムをどの方向に並べるか水平・垂直
flex-wrap	アイテムを1行or複数行にするか
justify-content	directionに沿ったアイテムの水平の揃え方
align-items	directionに沿ったアイテムの垂直の揃え方
align-content	アイテムの行ごとの揃え方複数行あり、親との間に隙間がある場合に有効

flex-directionによって見た目上の水平・垂直方向が異なります

flex-container.css

.flexbox-container {
    display: flex;
    /* 以下、デフォルト（指定しないとこの値が使用） */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

flexアイテムには適用させたい個別スタイルを設定する

flexアイテムには、どのように表示させるかの個別設定ができます。
例えば、他アイテムより幅を拡大・縮小したり、親の決めた整列ルールを上書きしたり、など。

アイテムに設定できる主要スタイル

プロパティ	概要
order	アイテムの順番を指定する
flex-grow	アイテムの伸びる倍率を指定する
flex-shrink	アイテムの縮む倍率を指定する
flex-basis	アイテムの幅・高さを指定する幅か、高さかはdirectionによる
align-self	コンテナのalign-itemsより優先する

flex-item.css

.flexbox-item {
    /* 以下、デフォルト（指定しないとこの値が使用） */
    order: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto;
}
.flexbox-item:nth-child(2) {
    flex-grow: 1;
}

できれば知っておきたいこと

一部プロパティをまとめて書けるショートハンドが存在する
ブラウザによってprefixの書き方が違うものがある

ショートハンドの存在

コンテナおよびアイテムのプロパティには、複数まとめて指定できるショートハンドがあります。
名前からコンテナ・アイテムどちらの指定か分かりにくいですが、いずれかのプロパティをまとめたもの、と覚えておくだけでも理解が早いと思います。

flexコンテナ

flex-container-shorthand.css

.flexbox-container {
    flex-flow: <flex-direction>, <flex-wrap>;
}

flexアイテム

flex-item-shorthand.css

.flexbox-item {
    flex: <flex-grow>, <flex-shrink>, <flex-basis>;
}

prefixには書き方が違うものがある

flexboxは書き方がちょこちょこ変わった経緯があります。
そのため単純に-ms-などをつけるだけでは対応できないものも存在します。

手動で書くのは大変なので、autoprefixerなど機械的に対応したいところです。

prefix.css

.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

flexbox動作確認ページについて

実際にプロパティの値でレイアウトがどのように適用されるのか、簡単に分かるようなページを作成したのでご紹介します。