Smart Brain

webサイト制作時、要素を横並びにするために「flex」のプロパティを使用することが多いかと思います。
「flex」を設定したけど、そこからの詳細設定はどうすればいいんだっけ？
といった疑問を持った方も少なくないのではないでしょうか。
今回は、そんな方のためにflexに関するプロパティをまとめてみました！

先ず初めに、「フレックスコンテナー」と、「フレックスアイテム」について復習しましょう。

■フレックスコンテナー（親）
⇒「display: felx;」を適用させた要素のことを、フレックスコンテナーと呼びます。

■フレックスアイテム（子）
⇒フレックスコンテナーの「子要素」を、フレックスアイテムと呼びます。
※子孫要素は含まない！

【flexに関するプロパティ一覧】

■フレックスコンテナーに指定するプロパティ

flex-wrap … フレックスアイテムの折り返しを指定。

flex-direction … フレックスコンテナーの主軸の方向を指定。（基本：左から右 = 横並び）

justify-content … フレックスアイテムの主軸方向（基本：横）の揃え位置の指定。

align-items … フレックスアイテムのクロス軸方向（基本：縦）の揃え位置の指定。

■フレックスアイテムに指定するプロパティ

flex-grow … フレックスアイテムの伸び率を指定。

flex-shrink … フレックスアイテムの縮み率を指定。

flex-basis … フレックスアイテムの幅を指定。

今回は、よく使用するプロパティのみを抜粋しましたが、他にも様々なプロパティが存在します。
実際に使用したいプロパティがあった場合は、値の指定方法などを自分で調べてみてくださいね！

参考url