質問: ### 前提・実現したいこと 現在、WPのニュースサイトのようなものを作成しており、 各記事へ遷移するパネルのコーディングをしております。 【PC】 大パネル:3 小パネル:3 【SP】 大パネル:2 小パネル:4 レスポンシブで上記のような表示の出し分けがしたいです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8685eace79e962631c25b904974c0a59.jpeg) 流し込みの関係上、大パネルも小パネルも同じ`ul`としております。 そのため、`li`ひとつひとつに連番を振っており、 `articleListStyle01,articleListStyle02,articleListStyle03`はwidthがどうこう... SPの時は`articleListStyle01,articleListStyle02`だけwidthが... というように、番号に対してstyleをつけています。 ### 発生している問題 表示の実現はできそうではあるのですが、 cssの記述が長くなってしまい、もっとすっきりした書き方できないかな?と思っています。 下記のように書くしかないでしょうか? ``` #content .articleList06 > li.articleListStyle01, #content .articleList06 > li.articleListStyle02, #content .articleList06 > li.articleListStyle03 { width: 33%; } #content .articleList06 > li.articleListStyle01 > a, #content .articleList06 > li.articleListStyle02 > a, #content .articleList06 > li.articleListStyle03 > a { display: initial; } #content .articleList06 > li.articleListStyle01 .imgArea img, #content .articleList06 > li.articleListStyle02 .imgArea img, #content .articleList06 > li.articleListStyle03 .imgArea img { width: initial; } . . . ```
回答: Flexboxを使うなら、`nth-child`を使って、下記のような感じでどうでしょうか。 ``` list1 list2 list3 list4 list5 list6 ``` ``` #content { display: flex; flex-wrap: wrap; } #content li { width: 100%; border: 1px solid; box-sizing: border-box; } #content li:nth-child(-n+2) { width: 49%; } @media screen and (min-width: 600px) { #content li:nth-child(-n+3) { width: 32%; } } ```