Flexible Boxについて（flexコンテナー編）
：Flexible Boxの使い方をまとめます。今回は「flexコンテナー」に指定するプロパティを紹介します。
簡単に横並びや、中央寄せができたり。便利なプロパティがたくさんあるので、振り返るのにも役立つようにまとめてみます！
目次
- ベースのHTML
- display: flex;
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
ベースのHTML
今回はul、liを使って紹介します。他のタグでももちろんOKです。
<ul class="sample"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
- 1
- 2
- 3
- 4
- 5
display: flex;
親要素に指定するだけで、中にある子要素が横並びになります。
display: flex;を親要素に書くことで、親要素に当たる部分（今回ならul）が「flexコンテナー」、その中にある子要素（今回はli）が「flexアイテム」となります。ざっくり名前だけでも覚えておくと良いと思います。
- 1
- 2
- 3
- 4
- 5
.sample {
display: flex;
}
/*インライン要素に使う場合は、こちらを指定します。*/
.sample {
display: inline-flex;
}
flex-direction
「flex-direction」は、flexアイテムが並ぶ方向を指定できます。たて・よこ方向があります。
row
左から右へ（初期値）
.sample {
display: flex;
flex-direction: row;
}
- 1
- 2
- 3
- 4
- 5
row-reverse
右から左へ
.sample {
display: flex;
flex-direction: row-reverse;
}
- 1
- 2
- 3
- 4
- 5
column
上から下へ
.sample {
display: flex;
flex-direction: column;
}
- 1
- 2
- 3
- 4
- 5
column-reverse
下から上へ
.sample {
display: flex;
flex-direction: column-reverse;
}
- 1
- 2
- 3
- 4
- 5
flex-wrap
「flex-wrap」は、１行で並んでいるflexアイテムの折り返しの有無と、並ぶ方向を指定できます。
nowrap
折り返ししない（初期値）
.sample {
display: flex;
flex-wrap: nowrap;
}
- 1
- 2
- 3
- 4
- 5
wrap
折り返しをする
.sample {
display: flex;
flex-wrap: wrap;
}
- 1
- 2
- 3
- 4
- 5
wrap-reverse
下から上方向に、折り返しをする
.sample {
display: flex;
flex-wrap: wrap-reverse;
}
- 1
- 2
- 3
- 4
- 5
flex-flow
「flex-direction」と「flex-wrap」をまとめて指定できるショートハンドです。
flex-flow:のあとに、flex-directionの値 半角スペース flex-wrapの値の順に指定します。
flex-flow: （flex-direction）（flex-wrap）;
初期値は「row nowrap」です。
.sample {
display: flex;
flex-flow: row-reverse wrap;
}
- 1
- 2
- 3
- 4
- 5
justify-content
水平方向の揃え方の指定ができます。
flex-start
flexアイテムが左寄せで並びます。flex-startが初期値です。
.sample {
display: flex;
justify-content: flex-start;
}
- 1
- 2
- 3
- 4
- 5
flex-end
flexアイテムが下寄せで並びます。
.sample {
display: flex;
justify-content: flex-end;
}
- 1
- 2
- 3
- 4
- 5
center
flexアイテムが中央寄せで並びます。
.sample {
display: flex;
justify-content: center;
}
- 1
- 2
- 3
- 4
- 5
space-between
flexアイテムの最初と最後を両端に配置し、残りの要素は均等に間をあけて配置する。
.sample {
display: flex;
justify-content: space-between;
}
- 1
- 2
- 3
- 4
- 5
space-around
flexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の両側にも均等にスペースが入ります。
.sample {
display: flex;
justify-content: space-around;
}
- 1
- 2
- 3
- 4
- 5
align-items
垂直方向の揃え方の指定ができます。
stretch
初期値になります。flexアイテムの一番高い要素に合わせて 他のflexアイテムも高さが伸びるため、便利です。
.sample {
display: flex;
align-items: stretch;
}
- 1
- 2
- 3
- 4
- 5
flex-start
垂直方向に上寄せで配置します。
.sample {
display: flex;
align-items: flex-start;
}
- 1
- 2
- 3
- 4
- 5
flex-end
垂直方向に下側に配置します。
.sample {
display: flex;
align-items: flex-end;
}
- 1
- 2
- 3
- 4
- 5
center
垂直方向に中央に配置します。
.sample {
display: flex;
align-items: center;
}
- 1
- 2
- 3
- 4
- 5
baseline
flexアイテムのベースラインで揃えます。
※わかりやすくするため、それぞれ文字サイズを変えています。
.sample {
display: flex;
align-items: baseline;
}
- 1
- 2
- 3
- 4
- 5
align-content
flexアイテムが複数行あるとき、垂直方向の揃え方の指定ができます。
stretch
初期値になります。flexアイテムの一番高い要素に合わせて 他のflexアイテムも高さが伸びるため、便利です。
.sample {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
- 1
- 2
- 3
- 4
- 5
flex-start
垂直方向に上寄せで配置します。
.sample {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
flex-end
垂直方向に下側に配置します。
.sample {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
center
垂直方向に中央に配置します。
.sample {
display: flex;
flex-wrap: wrap;
align-content: center;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
space-between
flexアイテムの最初と最後を上下両端に配置し、残りの要素は均等に行間をあけて配置する。
.sample {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
space-around
flexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の上下にも均等にスペースが入ります。
.sample {
display: flex;
flex-wrap: wrap;
align-content: center;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
まとめ
いかがでしたか？
使い慣れるまで、どのプロパティだっけ？となるかもしれませんが・・、まずはよく使うものから覚えていけると良いと思います。フレックスボックスは便利な使い方が色々できるので、頑張って覚えていきましょー♪