フレックスボックスの基本
通常、ブロックボックスは親要素の幅いっぱいに拡大し、縦に並ぶ
Item1
Item2
Item3
直接の子要素を横一列に並べる
.flex-basic {
display: flex;
}
Item1
Item2
Item3
要素が多く、親要素のボックスからあふれても横一列に並ぶ
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11
Item12
Item13
Item14
Item15
Item16
Item17
Item18
Item19
Item20
Item21
Item22
Item23
Item24
あふれた場合の処理
フレックスアイテムが親要素からあふれる場合、flex-wrap: wrap を適用すれば折り返せる
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11
Item12
Item13
Item14
Item15
Item16
Item17
Item18
Item19
Item20
Item21
Item22
Item23
Item24