Flex WrapとAlign-Content
flexアイテムを複数行に折り返し、align-contentで折り返した行を配置します。
「Flex WrapとAlign-Content」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
flex-wrap: nowrap（デフォルト）
デフォルトでは、flex アイテムは折り返されません。アイテムがコンテナの幅を超えると、新しい行に折り返されるのではなく、縮小するかオーバーフローします。
flex-wrap: wrap
flex-wrap: wrap を指定すると、主軸方向に収まらないアイテムは新しい行に折り返されます（column 方向では新しい列になります）。折り返された各行は、独立した小さな flex コンテナのように動作します。
<div class="card-grid">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
<div>Card 4</div>
<div>Card 5</div>
</div>
flex-wrap: wrap-reverse
wrap-reverse は、アイテムを交差軸の反対方向に折り返します。row 方向では、新しい行が下ではなく上に現れます。
カードを折り返すパターン
ビューポートが狭くなるとカードが次の行へ折り返される、典型的なレスポンシブカードレイアウトです。
<div class="cards">
<div class="card">Card A</div>
<div class="card">Card B</div>
<div class="card">Card C</div>
</div>
複数行に対する align-content
align-content は、交差軸上で折り返された行の間隔を制御します。行が1つしかない場合は効果がありません。指定できる値は justify-content と同様です。
align-content の値
使用できる値は次のとおりです。
flex-start— 交差軸の開始位置に向かって行を詰めますflex-end— 交差軸の終端に向かって詰めますcenter— 行を中央揃えにしますspace-between— 行の間に均等なスペースを配置しますspace-around— 行の周囲に均等なスペースを配置しますstretch— 行を引き伸ばして空間を埋めます（デフォルト）
<div class="gallery">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
align-items と align-content の違い
違いは次のとおりです。
align-items— 各 flex 行の中でアイテムを整列しますalign-content— コンテナ内で flex 行そのものを整列します
Flex における gap
gap プロパティ（以前は grid-gap）を使うと、マージンを使用せずに flex アイテム間へ一貫した間隔を追加できます。行間と列間の両方に使用できます。
<div class="flex-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
メディアクエリを使わないレスポンシブな折り返し
固定した理想的なサイズを基準に、収まる数だけ列を自動的に折り返します。メディアクエリは必要ありません。
<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
flex-flow の短縮記法
flex-flow は、1つの宣言で flex-direction と flex-wrap を組み合わせます。
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
折り返しと Grid の違い
行と列が定義された複雑な2次元レイアウトには、CSS Grid のほうが適しています。Flexbox の折り返しは、複数行に流れ込むことがある1次元のコンテンツに適しています。
確認問題
flex コンテナに複数の行がある場合、折り返された行そのものを整列するプロパティはどれですか。
まとめ
flex-wrap: wrap を使うと、アイテムを新しい行へ折り返せます。align-content は、複数行のコンテナでこれらの行の間隔を制御します。一貫した間隔には gap を使用します。flex: 1 1 250px と flex-wrap を組み合わせると、メディアクエリを使わずにレスポンシブなカードグリッドを作成できます。
よくある質問
「Flex WrapとAlign-Content」レッスンは無料ですか？
はい。「Flex WrapとAlign-Content」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Flex WrapとAlign-Content」で何を学びますか？
flexアイテムを複数行に折り返し、align-contentで折り返した行を配置します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Flex WrapとAlign-Content」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Display、Flex、Flex Direction
- Justify-ContentとAlign-Items
- Flex WrapとAlign-Content
- Flex Grow、Shrink、Basis