特定のポイントでフレックスボックス内の要素を折り返す

フレックスボックス レイアウトでは、flex-wrap プロパティを使用すると、要素を次の行に折り返すことができます。コンテナの幅を超えています。ただし、現時点では、どの要素がラップをトリガーするかを指定する標準的な方法はありません。

特定の要素の後にラップを強制する 1 つの回避策は、特定の幅。これにより、要素が親コンテナの幅全体を占めるようになり、その後の行が効果的に分割されます:

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

たとえば、次の CSS は 2 項目ごとにリスト項目をラップします。

ul {
  display: flex;
  flex-wrap: wrap;
}

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

このメソッドは、追加のマークアップを必要とせずにラッピング動作を制御する柔軟な方法を提供します。ただし、メディア クエリに依存しているため、状況によってはパフォーマンスのオーバーヘッドや制限が発生する可能性があることに注意することが重要です。