レイアウトの仕方は色々覚えていた方が作業がはかどる！というわけで以前のCSSグリッドレイアウトに続き、今回はFlexboxについて。
CSSグリッドレイアウトについてはこちらから
Flexboxとは
FlexboxとはFlexible Box Layout Moduleの略称で、柔軟性のあるレイアウトができるCSSです。
使用する場面にもよりますが、今までfloatなどで横並びにしていたレイアウトもこのFlexboxでより組みやすく編集もしやすくなった気がします。
Flexboxの使い方
早速実践してみましょう。
See the Pen Flexbox1 by sukimadou (@sukimadou) on CodePen.
divで囲んだ要素を５つ用意しました。
色や余白を調整してあるだけなので、まだ縦並びの状態です。
ここで親要素にdisplay:flexを指定してみましょう。
See the Pen Flexbox2 by sukimadou (@sukimadou) on CodePen.
なんとこれだけで、横並びに。
高さも文字数に合わせられていますね。
（上記のプレビューで画面幅が狭くて文字まで縦並びの状態しか見れない！という方はプレビュー下で倍率を変えてみてください）
親要素へdisplay:flexを指定することで、Flexboxにしますよという指示になります。
あとは見え方や並び方をお好みに指定していけばOKです。
レイアウト方法
横方向の配置（justify-content）
親要素（Flexコンテナ）へjustify-contentを指定することで、横方向の配置をコントロールできます。
左揃え flex-start
右揃え flex-end
中央揃え center
両端の余白なしで均等に配置 space-between
均等に配置 space-around
たて方向の配置（align-items）
親要素（Flexコンテナ）へalign-itemsを指定することで、たて方向の配置をコントロールできます。
一番高い要素に合わせる stretch
上揃え flex-start
下揃え flex-end
中央揃え center
複数行のたて方向の配置（align-content）
親要素（Flexコンテナ）へalign-contentを指定することで、複数行の場合のたて方向の配置をコントロールできます。
一番高い要素に合わせる stretch
上揃え flex-start
下揃え flex-end
中央揃え center
両端の余白なしで均等に配置 space-between
均等に配置 space-around
並び順（flex-direction）
親要素（Flexコンテナ）へflex-directionを指定することで、並びの方向をコントロールできます。
左から並ばせる row
右から並ばせる row-reverse
上から並ばせる column
下から並ばせる column-reverse
折り返しの指定（flex-wrap）
親要素（Flexコンテナ）へflex-wrapを指定することで、折り返しを指定できます。（折り返しの指定なしだと子要素が全て真横に並ぶ）
折り返さない nowrap
左から順に折り返し wrap
右から順に折り返し wrap-reverse
自由な並び順（order）
子要素（Flexアイテム）へorder: 数値を指定することで、子要素の並び順をカスタムできます。
要素の幅を指定（flex-basis）
子要素（Flexアイテム）へflex-basis: 数値を指定することで、子要素の幅を指定できます。
指定する数値はpxなどの単位がつくものに限ります。
幅の割合を広げる（flex-grow）
子要素（Flexアイテム）へflex-grow: 数値を指定することで、子要素の幅の割合を広げるカスタムができます。
数値が大きいほど幅の割合も大きくなります。
幅の割合を縮める（flex-shrink）
子要素（Flexアイテム）へflex-shrink: 数値を指定することで、子要素の幅の割合を縮めるカスタムができます。
flex-growとは逆に数値が大きいほど幅の割合は小さくなります。
