レスポンシブ対応のコーディングにとても便利なFlexboxレイアウトですが、前回記事「CSSのFlexboxレイアウトをマスターするためのまとめ（Flexコンテナー編）」に引き続きこちらの記事でもまとめていきたいと思います。今回は子要素であるFlexアイテムについてです。  

実践：子要素の「Flexアイテム」の振る舞いを指定する

前回のおさらいとなりますが、Flexboxレイアウトは親要素の「Flexコンテナー」と子要素の「Flexアイテム」から構成されます。以下は子要素のFlexアイテムに対して行う指定です。   1. 子要素の並び順序を指定する「order」 Flexコンテナー内にあるFlexアイテムを指定した順番に並べることができます。並び順に合わせた数値を指定します。（プレフィックスを付ける場合は「-webkit-order」となります）

.flex-item:first-child {
   order: 3;
   -webkit-order: 3;
}
.flex-item:nth-child(2) {
   order: 1;
   -webkit-order: 1;
}
.flex-item:nth-child(3) {
   order: 2;
   -webkit-order: 2;
}

    2. 親要素内の余白を埋めるために子要素が伸びる割合を指定する「flex-grow」 親要素であるFlexコンテナーに子要素のFlexアイテムが入りますが、その時に余ったスペースを埋めるために子要素のサイズが伸びる割合を指定できます。指定した子要素のみがそれ以外の子要素と比較して余白を埋める分、値に応じてサイズが伸びます。余白が埋まり切らない場合は値に関係なく余白を埋める分だけ伸びます。0の値が初期サイズになります。（プレフィックスを付ける場合は「-webkit-flex-grow」となります）

.flex-item:first-child {
   flex-grow: 0;
   -webkit-flex-grow: 0;
}
.flex-item:nth-child(2) {
   flex-grow: 3;
   -webkit-flex-grow: 3;
}
.flex-item:nth-child(3) {
   flex-grow: 0;
   -webkit-flex-grow: 0;
}

    3. 親要素からはみ出した分を収めるために子要素が縮む割合を指定する「flex-shrink」 今度は親要素であるFlexコンテナーから並んだ子要素のFlexアイテムがはみ出す場合、親要素内に収めるために子要素を縮める割合を指定できます。指定した子要素のみがそれ以外の子要素と比較してはみ出した分を収める分、値に応じてサイズが縮みます。余白が出るところまで縮むことはありません。1の値が初期サイズになります。（プレフィックスを付ける場合は「-webkit-flex-shrink」となります）

.flex-item:first-child {
   flex-shrink: 1;
   -webkit-flex-shrink: 1;
}
.flex-item:nth-child(2) {
   flex-shrink: 2;
   -webkit-flex-shrink: 2;
}
.flex-item:nth-child(3) {
   flex-shrink: 1;
   -webkit-flex-shrink: 1;
}

    4. 子要素の基準となるサイズを指定する「flex-basis」 子要素の基準となるサイズを指定できます。指定した子要素のみが値のサイズを持ち、それ以外の子要素は元のサイズを維持します。pxなどの絶対サイズと%などの相対サイズが使えます。autoの値が元のサイズになります。（プレフィックスを付ける場合は「-webkit-flex-basis」となります）

.flex-item:first-child {
   flex-basis: 15%;
   -webkit-flex-basis: 15%;
}
.flex-item:nth-child(2) {
   flex-basis: 25%;
   -webkit-flex-basis: 25%;
}
.flex-item:nth-child(3) {
   flex-basis: 35%;
   -webkit-flex-basis: 35%;
}

    5. 子要素の垂直方向への整列を指定する「align-self」 子要素を垂直方向に揃えたい場合に指定します。親要素のFlexコンテナーで扱う「align-items」と同じ効果ですが、小要素に対してはこちらの「align-self」で指定した値が優先的に適用されます。（プレフィックスを付ける場合は「-webkit-align-self」となります）

auto	親要素のalign-itemsの値を継承して適用させます。
stretch	親要素の高さにあわせて子要素の高さが引き延ばされるように配置されます。
flex-start	親要素の上端に寄せて子要素が配置されます。
center	親要素の垂直方向中央に寄せて子要素が配置されます。
flex-end	親要素の下端に寄せて子要素が配置されます。
baseline	親要素のベースラインに合わせて子要素が配置されます。

   

おまけ：子要素の「Flexアイテム」で使えるショートハンド

「flex-grow」と「flex-shrink」と「flex-basis」をまとめて指定できる「flex」 小要素のサイズに関する指定をまとめてできます。flex-grow、flex-shrink、flex-basisの順に指定します。

.flex-container {
   flex: 0 1 300px;
   -webkit-flex: 0 1 300px;
}

   

おまけ：Flexboxレイアウトの各種ブラウザ対応状況

とても便利なFlexboxですが、古いブラウザには対応していない、もしくは対応させるための作業が必要なケースもあるようです。   まず完全に対応しているのは下記のブラウザになります。 ・GoogleChrome ・Firefox ・Safari ・Opera ・Edge ・iOS Safari ・Android Browser ・Internet Explorer 11 この中で、SafariとiOS Safariには「-webkit-」のベンダープレフィックスが必要です。  

Internet Explorer 10への対応

少し書き方が異なり「-ms-」のベンダープレフィックスが必要なのとdisplayプロパティの値がflexboxになります。

.flex-container {
   display: flex;
   display: -ms-flexbox;　　// IE10対応
   flex-direction: row;
   -ms-flex-direction: row;　　// IE10対応
}

   

Internet Explorer 9への対応

Internet Explorer 9を含むそれ以下については未対応になるのでFlexboxレイアウトとは異なる別の方法を検討する必要がありますが、「flexibility.js」というプラグインを使うことで対応できるとのことです。使う際にはCSS記述時に以下のようにする必要があります。

.flex-container {
   display: flex;
   -js-display: flex;　　// IE9以下対応（flexibility.jsの使用）
}

  また、flexibility.jsの読み込みと下記の実行スクリプトをページ内に設置します。

<!--[if lte IE 9]>
<script src="js/flexibility.js"></script>
<script>
  $(function(){
    flexibility(document.documentElement);
  });
</script>
<![endif]-->

   

その他古いブラウザへの対応

今はあまり必要ないかもしれませんが、display: flex;の前身にあたるdisplay: box;というのがありました。各プロパティも少し異なるので注意が必要です。ただし草案的な位置付けなのでバグ対応など局所的にという形で使用するケースがほとんどだと思います。

.flex-container {
   display: flex;
   display: -webkit-box;　　// 旧Chrome・Safari・Android対応
   display: -moz-box;　　// 旧Firefox対応 
   display: -o-box;　　// 旧Opera対応 
   display: -ms-box;　　// IE10対応（boxプロパティ） 
}

// 親要素内の整列
.flex-container {
  justify-content: flex-start;
  box-pack: start;　　// boxプロパティ
}

// 子要素の並び順指定整列
.flex-item {
   order: 1;
   box-ordinal-group: 1;　　// boxプロパティ
}

// 子要素のサイズ伸縮指定
.flex-item {
   flex-grow: 2;
   box-flex: 2.0;　　// boxプロパティ
}

 

---

  今回は全2回にわたりFlexboxレイアウトに関する記事をまとめてみました。これでFlexboxレイアウトのコーディングもバッチリではないでしょうか。今後レスポンシブ対応が必然となってくる時がくるかと思いますので、今の間にマスターしておくことをオススメします！今回もサンプルはこちらに用意いたしましたので参考にどうぞ！