ホームページ > 記事 > ウェブフロントエンド > CSS フレックスボックスで要素の折り返しを制御する方法: 特定の要素の後にフレックスボックスを強制的に折り返すことはできますか?
CSS フレックスボックスで要素の折り返しを制御する方法
質問:
方法はありますかフレックスボックスレイアウトで折り返しが発生する要素を指定するには?これは、追加のマークアップを追加せずにリストの応答性を制御するのに役立ちます。
回答:
には明示的な "flex-break" プロパティはありません。フレックスボックス標準では、次のテクニックを組み合わせることでこの効果を実現できます:
例:
<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 サイトの他の関連記事を参照してください。