フレックスボックスの基本

通常、ブロックボックスは親要素の幅いっぱいに拡大し、縦に並ぶ

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