CSS Flexboxを使いこなす – まとめ

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アイテムの並べ替え 値:数値

カテゴリーCSS