CSS フレックスボックスで要素の折り返しを制御する方法: 特定の要素の後にフレックスボックスを強制的に折り返すことはできますか?

CSS フレックスボックスで要素の折り返しを制御する方法

質問:

方法はありますかフレックスボックスレイアウトで折り返しが発生する要素を指定するには?これは、追加のマークアップを追加せずにリストの応答性を制御するのに役立ちます。

回答:

には明示的な "flex-break" プロパティはありません。フレックスボックス標準では、次のテクニックを組み合わせることでこの効果を実現できます:

1. Set "flex-wrap: Wrap;"コンテナ上: これにより、必要に応じて項目を新しい行に折り返すことができます。
2. 「flex-basis: 100%;」を使用します。 の後に分割する子要素上で、これらの要素の最小幅を 100% に設定するようにブラウザに指示し、事実上新しい行で開始するように強制します。

例:

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

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

この例では、リスト内の項目は、(利用可能なスペースに応じて) 他の要素ごとに新しい行に折り返されます。 「nth-child()」の値を調整することで、ラップを引き起こす要素を制御できます。

より完全なデモについては、提供されている JSFiddle を参照してください: http://jsfiddle.net/theazureshadow/ww8DR /

以上がCSS フレックスボックスで要素の折り返しを制御する方法: 特定の要素の後にフレックスボックスを強制的に折り返すことはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。