Boxの使い方をまとめます。今回は「flexコンテナー」に指定するプロパティを紹介します。簡単に横並びや、中央寄せができたり。flex;flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentベースのHTML今回はul、liを使って紹介します。他のタグでももちろんOKです。flex;親要素に指定するだけで、中にある子要素が横並びになります。flex;を親要素に書くことで、親要素に当たる部分(今回ならul)が「flexコンテナー」、その中にある子要素(今回はli)が「flexアイテム」となります。名前だけでも覚えておくと良いと思います。flex;}/*インライン要素に使う場合は、こちらを指定します。inline-flex;}flex-direction「flex-direction」は、flexアイテムが並ぶ方向を指定できます。たて・よこ方向があります。column-reverse;}12345flex-wrap「flex-wrap」は、1行で並んでいるflexアイテムの折り返しの有無と、並ぶ方向を指定できます。wrap-reverse;}12345flex-flow「flex-direction」と「flex-wrap」をまとめて指定できるショートハンドです。flex-wrapの値の順に指定します。wrap;}12345justify-content水平方向の揃え方の指定ができます。flex-startflexアイテムが左寄せで並びます。flex-startが初期値です。flex-start;}12345flex-endflexアイテムが下寄せで並びます。flex-end;}12345centerflexアイテムが中央寄せで並びます。center;}12345space-betweenflexアイテムの最初と最後を両端に配置し、残りの要素は均等に間をあけて配置する。space-between;}12345space-aroundflexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の両側にも均等にスペースが入ります。space-around;}12345align-items垂直方向の揃え方の指定ができます。stretch初期値になります。他のflexアイテムも高さが伸びるため、便利です。stretch;}12345flex-start垂直方向に上寄せで配置します。flex-start;}12345flex-end垂直方向に下側に配置します。flex-end;}12345center垂直方向に中央に配置します。center;}12345baselineflexアイテムのベースラインで揃えます。※わかりやすくするため、それぞれ文字サイズを変えています。baseline;}12345align-contentflexアイテムが複数行あるとき、垂直方向の揃え方の指定ができます。stretch初期値になります。他のflexアイテムも高さが伸びるため、便利です。stretch;}12345flex-start垂直方向に上寄せで配置します。flex-start;}12345678910flex-end垂直方向に下側に配置します。flex-end;}12345678910center垂直方向に中央に配置します。center;}12345678910space-betweenflexアイテムの最初と最後を上下両端に配置し、残りの要素は均等に行間をあけて配置する。space-between;}12345678910space-aroundflexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の上下にも均等にスペースが入ります。center;}12345678910まとめいかがでしたか?使い慣れるまで、どのプロパティだっけ?となるかもしれませんが・・、まずはよく使うものから覚えていけると良いと思います。CSSの【float】についてちょっと本気出して説明してみた。しこのブログはWebコンテンツ総合製作の「ふたっぱ!」が運営しています。