ホームページ  >  記事  >  ウェブフロントエンド  >  Flexbox リストを特定の位置で強制的に折り返すにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-10-31 03:15:31195ブラウズ

How to Force Flexbox Lists to Wrap at Specific Positions?

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

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

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。