Flexboxの使い方！

　CSSレイアウトにはさまざまな方法がありますが、その中でも比較的新しく、使いこなせると便利で、迅速にサイト設計ができるものの一つがFlexboxです。Flexboxはdisplayプロパティの一つであり、block要素、inline要素をそれぞれよしなに配置できるように使いやすく開発されております。

Flexboxとは、

行または列にアイテムをレイアウトするための1次元レイアウト方法。アイテムは、追加のスペースを埋めるために曲がり、より小さなスペースに収まるように縮小する。

ということで、今回はFlexboxをマスターしていきましょう！

display:flex

　まずdisplayのプロパティを、display:flex とすることで、flexboxを使用する準備が整います。
　これにより、親要素はフレックスコンテナになり、その子要素はフレックスアイテムになります。

flex-direction

　flex-directionは、アイテムが配置される主軸を定義します。
　指定されていない場合、デフォルトはflex-direction: rowです。 他にも、row-reverse、column、およびcolumn-reverse などのオプションがあります。

justify-content

　justify-contentは、アイテムが主軸（またはフレックス方向）内でどのように配置されるかを制御します。
　指定されていない場合、デフォルトはjustify-content: flex-startです。 他のオプションは、center、 flex-end、space-between、space-aroundなどがあります。

align-items

　align-itemsは、アイテムが交差軸、または主軸に垂直な軸でどのように配置されるかを制御します。
　指定されていない場合、デフォルトはalign-items: stretchです。 これにより、合わせ軸の余白全体が埋められます。他には、center、flex-start、flex-endなどがあります。

align-self

　これまでに説明した他のプロパティとは異なり、align-selfは（親要素ではなく）アイテム自体に指定されます。 上記のalign-itemsと同じオプションがあり、stretch、center、flex-start、flex-end などが使えます。

flex-grow

　flex-growは、コンテナが主軸に沿って伸びる場合、使用可能なすべての余白を満たすためにアイテムがどのように伸び率を決定します。 flex-growはアイテム自体で指定されます。
　指定されていない場合、デフォルトはflex-grow: 0です。これは、親要素のサイズが大きくなってもアイテムが大きくならないことを意味します。親要素の余白が与えられると、成長係数を持つアイテムは、flex-growプロパティで指定された比率に従って余白を埋めるように伸びます。
　アイテムに0より大きい値のflex-growプロパティがある場合、アイテムは（主軸の）すべての余白を埋めるように拡張され、justify-contentプロパティが不要になります。

flex-shrink

　flex-shrinkは、親コンテナが縮小するときにアイテムが縮小する比率を決定します。flex-growに似ていますね。flex-shrinkはアイテム自体に指定されています。
　指定されていない場合、デフォルトはflex-shrink: 1です。 flex-shrink: 0のアイテムは、何があってもサイズを維持し、縮小しません。