CSS: flex : li タグを左右に並べる

・CSS flex で li タグを左右に並べるサンプル。
  ウインドの幅も変えて眺めてみる。

1) flex-wrap の指定がない場合 (norwap)

ページの幅が狭いときに li の幅が自動的に縮小します。

項目1
項目2
項目3
項目4
項目5

2) flex-wrap: wrap; の場合

wrap の場合はページの幅が狭いときに li が折り返します。

項目1
項目2
項目3
項目4
項目5

(2024/03)
動作     : Edge120, Firefox120, Chrome119

◎ ノート
・MDN: flex
・MDN: flex-wrap