Flexbox
- Chrome
- Firefox
- IE11
CSS3のFlexboxをいろいろと試してみます。
Flexbox使用前
See the Pen flexbox_basic01 by yukako (@KDWyukako) on CodePen.
親要素「class="contents"」の中に、子要素（緑色のボックス）「class="item"」が入っている。
親要素に関するプロパティ
横並び
See the Pen flexbox_basic02 by yukako (@KDWyukako) on CodePen.
親要素に「display: flex;」を指定。
justify-content：水平方向の揃え方
See the Pen flexbox_basic03 by yukako (@KDWyukako) on CodePen.
親要素の幅に合わせて、子要素の並べ方を指定。
サンプルでは、「space-around」を指定。左右の端も含めて均等間隔に配置する。
他にも「flex-start」「flex-end」「center」「space-between」がある。
flex-direction：子要素の配置方向
See the Pen flexbox_basic04 by yukako (@KDWyukako) on CodePen.
サンプルでは、右から並ぶように「flex-direction:row-reverse;」を指定。
他にも、上から下に並べる「column」、下から上に並べる「column-reverse」等がある。
align-items：垂直方向の揃え方
See the Pen flexbox_basic05 by yukako (@KDWyukako) on CodePen.
サンプルでは、上下中央に配置するよう「center」を指定。
他にも、「flex-start」「flex-end」「baseline」「stretch」がある。
flex-wrap：子要素の折り返し方
See the Pen flexbox_basic06 by yukako (@KDWyukako) on CodePen.
初期値は「nowrap」（折り返しなし）。サンプルでは、折り返して上から下へ配置するよう「wrap」を指定。
他にも、折り返して下から上へ配置する「wrap-reverse」がある。
align-content：複数行にした時の揃え方
See the Pen flexbox_basic07 by yukako (@KDWyukako) on CodePen.
サンプルでは、上揃えにするよう「flex-start」を指定。
複数行の時も垂直方向の揃え方を上下中央に配置したい場合は、「center」を指定。
他にも、「flex-end」「center」「space-between」「space-around」がある。
子要素に関するプロパティ
order：順番指定
See the Pen flexbox_basic08 by yukako (@KDWyukako) on CodePen.
子要素の表示順を変えることができる。
flex-grow：子要素の伸びる比率
See the Pen flexbox_basic09 by yukako (@KDWyukako) on CodePen.
親要素のスペースに余りがある場合、「flex-grow」の値を設定すると、自動的に利用可能な領域いっぱいまで伸びる。（flex-growの逆）
サンプルでは、item2が2倍になるよう「flex-grow:2;」を指定。
flex-shrink：子要素の縮む比率
See the Pen flexbox_basic10 by yukako (@KDWyukako) on CodePen.
親要素のスペースに余りがなく子要素が入りきらない場合、「flex-grow」の値を設定すると、自動的に対象の子要素が縮む。
サンプルでは、item2が1/2倍になるよう「flex-shrink:2;」を指定。
flex-basis：子要素のベースとなる幅の指定
See the Pen flexbox_basic11 by yukako (@KDWyukako) on CodePen.
子要素のベースとなる長さ（あるいは「最小の長さ」）を設定。
「width」とほぼ同じ働き。
。「auto」と指定した場合、子要素のコンテンツサイズが設定される。
align-self：子要素の個別の垂直方向の揃え方
See the Pen flexbox_basic12 by yukako (@KDWyukako) on CodePen.
サンプルでは、上下中央に配置するよう「center」を指定。
他にも、「flex-start」「flex-end」「baseline」「stretch」がある。
参考：日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
応用：「前の記事」「次の記事」へのリンク
See the Pen Flexbox_Sample01 by yukako (@KDWyukako) on CodePen.
hoverで矢印アイコン追加
See the Pen Flexbox_Sample02 by yukako (@KDWyukako) on CodePen.
サムネイル追加
See the Pen Flexbox_Sample03 by yukako (@KDWyukako) on CodePen.
応用：マルチカラムレイアウト
3カラム（画面サイズが狭くなると1カラム）
See the Pen Flexbox_MultiColumn01 by yukako (@KDWyukako) on CodePen.
カラムを敷き詰めるMasonryレイアウト
See the Pen Flexbox_MultiColumn02 by yukako (@KDWyukako) on CodePen.
