前回の記事をみていないという方はこちらからどうぞ

では、今回は応用編としてFlexboxのプロパティについて説明していこうと思います。

Flexboxのプロパティ

Flexboxのプロパティには親要素に使用できるものと子要素に使用できるものがあります。

親要素とは、前回述べたコンテナのことであり、子要素はアイテムのことです。

今回は、親要素に使用するプロパティについて説明します。

親要素（Flexコンテナ）に使用するプロパティ

まずどのようなプロパティがあるのか一覧で見てから1つ1つ説明していきます。

• align-items
• align-content
• justify-content
• flex-wrap
• flex-direction
• flex-flow

以上が親要素（Flexコンテナ）に使用できるプロパティです。

では、それぞれ説明していきます。

align-items

align-itemsは縦並びの要素の位置を指定するプロパティです。

例えば、align-itemsの値にflex-startを指定すれば、アイテムを上揃えで配置します。

他にも下揃えのflex-endや中央揃えのcenterなどがあります。

align-content

align-contentはアイテムの行の縦並びの位置を指定するプロパティです。

align-contentでよく使うのは余白を埋めるstretchや、余白を埋めるかつ均等の間隔を空けるspace-betweenなどです。

高さが異なるアイテムでも均一にできるため非常に便利です。

justify-content

justify-contentは横方向の位置を指定するプロパティです。

両端のアイテムの余白を開けず、他の要素は均一に間隔を空けるspace-betweenや両端も含め均一な間隔を空けるspace-aroundなどは非常によく使用するプロパティなので是非覚えておきましょう。

flex-wrap

flex-wrapはアイテムの折り返しを指定するプロパティです。

アイテムを折り返し、上段から下段に並べるのがwrapで逆に下段から上段に並べるのがwrap-reverseです。

これは値自体がreverseとなっているので比較的に覚えやすいかと思います。

また、折り返したくない場合にはnowrapと指定するだけです。

flex-direction

flex-directionはアイテムを配置する方向を指定するプロパティです。

横方向に左から右に配置するのがrowで、その逆がrow-reverseです。

縦方向に指定したいなら値にcolumnを指定すれば縦方向に上から下へと配置されます。その逆がcolumn-reverseです。

flex-flow

flex-flowはflex-directionとflex-wrapを一括で指定するプロパティです。

例えば

.container {
flex-flow: column wrap-reverse;
}

と指定するような形です。

1行で指定できるのでコードが少なくなりますね。

まとめ

以上が親要素に使用できるプロパティです。

非常に便利なプロパティが盛り沢山ですね！

前回の記事でFlexboxを未だ使用していないのは時代遅れであると言っていいと言った意味がわかったかと思います。

次回では子要素（Flexアイテム）に使用するプロパティを説明したいと思います。

では、また次回！