Flexbox リストを特定の位置で強制的に折り返すにはどうすればよいですか?

特定の位置でフレックスボックス リストを分割する方法

特定の要素の後の特定の位置でフレックスボックス リストを分割したい状況に遭遇します。レイアウトの応答性が向上します。フレックスボックス標準はこれを明示的にサポートしていませんが、使用できるトリックがあります。

CSS Magic

特定の要素の後にラップを強制するには、次の CSS を追加します。コンテナに追加します:

<code class="css">ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}</code>

次に、ラップを実行する要素に次の CSS を追加します:

<code class="css">li:nth-child(4n) {
  flex-basis: 100%;
}</code>

ここで、「4n」は要素の位置を表します。リスト (例: 4n は 4 番目の要素、8 番目の要素などを意味します)。

コード例

たとえば、次の HTML マークアップを考えてみましょう。

<code class="html"><ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul></code>

および付随する CSS:

<code class="css">ul {
    display: flex;
    flex-wrap: wrap;
}

li:nth-child(2n) {
    flex-basis: 100%;
}</code>

この設定により、2 番目の要素ごとにリストが強制的に折り返され、その結果、さまざまな画面サイズに適応する応答性の高いレイアウトが得られます。

以上がFlexbox リストを特定の位置で強制的に折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。