この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
コンテナの幅を超える場合の制御
コンテナの幅をアイテムが超えることもあります。そのときの挙動を制御するのが flex-wrap と align-content です。
flex-wrap：折り返し指定
デフォルトでは、Flex アイテムは一行に無理やり収まろうとします。flex-wrap プロパティは、アイテムの折り返しを許可するかどうかを指定します。
-
nowrap（デフォルト）：折り返さず、一行に収める -
wrap：コンテナに収まらない場合、複数行に折り返す -
wrap-reverse：上下逆の順序で複数行に折り返す
align-content：行間の余白指定
flex-wrap: wrap; によってアイテムが複数行になった場合にのみ、align-content プロパティが有効になります。これは、行と行の間のスペースをどう分配するかを指定します。
justify-content の「縦方向版」と考えると分かりやすいです。
-
stretch（デフォルト）：各行がコンテナの高さに合わせて引き伸ばされる -
flex-start：全ての行をコンテナの上端に寄せる -
flex-end：全ての行をコンテナの下端に寄せる -
center：全ての行をコンテナの中央に集める -
space-between：上下の行をコンテナの端に配属し、残りの行間の余白を均等に分配する -
space-around：全ての行の周りに均等に余白を配置する。 -
space-evenly：全ての行間、そして上下の端にも、完全に均等な余白を分配する
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0044</title>
</head>
<body>
<main>
<h1>align-content プロパティ</h1>
<section>
<h2>align-content: stretch</h2>
<div style="display: flex; flex-wrap: wrap; align-content: stretch; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>align-content: flex-start</h2>
<div style="display: flex; flex-wrap: wrap; align-content: flex-start; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>align-content: flex-end</h2>
<div style="display: flex; flex-wrap: wrap; align-content: flex-end; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>align-content: center</h2>
<div style="display: flex; flex-wrap: wrap; align-content: center; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>align-content: space-between</h2>
<div style="display: flex; flex-wrap: wrap; align-content: space-between; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>align-content: space-around</h2>
<div style="display: flex; flex-wrap: wrap; align-content: space-around; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>align-content: space-evenly</h2>
<div style="display: flex; flex-wrap: wrap; align-content: space-evenly; width: 200px; height: 200px; border: 1px solid #ccc;">
<div style="width: 120px; background-color: azure;">1</div>
<div style="width: 120px; background-color: bisque;">2</div>
<div style="width: 120px; background-color: burlywood;">3</div>
</div>
</section>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>