![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7Th9WFuy2TiTIhWkERadkNNEN_IO4L1nMSSUI3jh3pzhNPvCzgnJk1p6YBhU1_s0D6WjX_49Hzj44TKJck8pRW-zwGm97bC_GKsS1Crwf7GOKABpEKhMYCkooaP-phCYJs9J26miO6UP/s0/%25E3%2583%25AA%25E3%2582%25B9%25E3%2583%2588%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AE%25E9%25A0%2585%25E7%259B%25AE%25E3%2582%2592+%25E6%25A8%25AA%25E4%25B8%25A6%25E3%2581%25B3%25E3%2581%25AB%25E3%2581%2599%25E3%2582%258B%25EF%25BC%258A%25E3%2582%25A6%25E3%2582%25A3%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A6%25E5%25B9%2585%25E3%2581%25AB%25E5%25BF%259C%25E3%2581%2598%25E3%2581%25A6+%25E6%258A%2598%25E3%2582%258A%25E8%25BF%2594%25E3%2581%2597%25E6%2596%25B9%25E3%2582%2592%25E5%25A4%2589%25E3%2581%2588%25E3%2582%258B.png)
リスト要素の項目を横並びにする で、ウィンドウ幅に応じて折り返し方を変える方法。
具体的には、ウィンドウ幅が狭い場合は折り返さない。ウィンドウ幅がある程度広い場合は折り返したい場合、下記のように指定する。
CSS
補足
- 4行目:折り返さない場合の li 要素の幅(列数)を指定。
- 8行目以降:ウィンドウ幅が 640px 以上のときの、折り返しと寄せる方向、表示列数を指定。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
HTML
補足
- 1行目:ウィンドウ幅が 640px 未満のとき、折り返さないので data-flex-wrap="nowrap" を設定。