CSS Flexboxは、プロパティがたくさんあって、初めは覚えるのが大変だと思いましたが、一通り使ってみて思ったのは、レイアウトの実現が楽で、プロパティが多くてもストレスレスな感じですね。
Flexコンテナ(親要素)とFlexアイテム(子要素)、それぞれに記載するプロパティを図にしてみました。
Flexコンテナ(親要素)に記述するプロパティ
以下、詳細へのリンクと、要約です。
Flexboxの基本の記述
「desplay: flex」と最初に記述。必須。
flex-direction
方向の指定 値:row, row-reverse, column, column-reverse
flex-wrap
改行可否の指定 値:nowrap, wrap, wrap-reverse
flex-flow
「flex-direction」「flex-wrap」を一緒に記載するショートハンド
justify-content
水平方向の配置 値:flex-start, flex-end, center, flex-between, flex-around
align-items
垂直方向の配置 値:flex-start, flex-end, center, baseline, stretch
align-content
行の配置 値:flex-start, flex-end, center, flex-between, flex-around, stretch
Flexアイテム(子要素)に記述するプロパティ
以下、詳細へのリンクと、要約です。
flex-grow
flexアイテムの伸長倍率 値:数値(マイナス無効)
flex-shrink
flexアイテムの短縮倍率 値:数値(マイナス無効)
flex-basis
flexアイテムのサイズ 値:auto, 数値(pxなど)
flex(ショートハンド)
「flex-grow」「flex-shrink」「flex-basis」を一緒に記述するショートハンド
align-self
各Flexアイテムの垂直方向の配置 値:flex-start, flex-end, center, baseline, stretch
order
Flexアイテムの並べ替え 値:数値