この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
justify-content とは
justify-content は、主軸（flex-direction で決めた向き）に沿って、Flexアイテム間の余白をどのように分配するかを決めるプロパティです。
本棚に、幅が余った状態で本を並べる方法をイメージすると分かりやいかもしれません。
-
flex-start（デフォルト）：コンテナの始点にアイテムを詰める（本を左端に寄せる） -
flex-end：コンテナの終点にアイテムを詰める（本を右端に寄せる） -
center：コンテナの中央にアイテムを集める（本を中央にまとめる） -
space-bertween：両端のアイテムをコンテナの端に配置し、残りのアイテム間の余白を均等に分配する -
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本ノック 0041</title>
</head>
<body>
<main>
<h1>justify-content プロパティ</h1>
<section>
<h2>justify-content: flex-start</h2>
<div style="display: flex; justify-content: flex-start;">
<div style="width: 100px; height: 100px; background-color: azure;">1</div>
<div style="width: 100px; height: 100px; background-color: bisque;">2</div>
<div style="width: 100px; height: 100px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>justify-content: flex-end</h2>
<div style="display: flex; justify-content: flex-end;">
<div style="width: 100px; height: 100px; background-color: azure;">1</div>
<div style="width: 100px; height: 100px; background-color: bisque;">2</div>
<div style="width: 100px; height: 100px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>justify-content: center</h2>
<div style="display: flex; justify-content: center;">
<div style="width: 100px; height: 100px; background-color: azure;">1</div>
<div style="width: 100px; height: 100px; background-color: bisque;">2</div>
<div style="width: 100px; height: 100px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>justify-content: space-between</h2>
<div style="display: flex; justify-content: space-between;">
<div style="width: 100px; height: 100px; background-color: azure;">1</div>
<div style="width: 100px; height: 100px; background-color: bisque;">2</div>
<div style="width: 100px; height: 100px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>justify-content: space-around</h2>
<div style="display: flex; justify-content: space-around;">
<div style="width: 100px; height: 100px; background-color: azure;">1</div>
<div style="width: 100px; height: 100px; background-color: bisque;">2</div>
<div style="width: 100px; height: 100px; background-color: burlywood;">3</div>
</div>
</section>
<section>
<h2>justify-content: space-evenly</h2>
<div style="display: flex; justify-content: space-evenly;">
<div style="width: 100px; height: 100px; background-color: azure;">1</div>
<div style="width: 100px; height: 100px; background-color: bisque;">2</div>
<div style="width: 100px; height: 100px; background-color: burlywood;">3</div>
</div>
</section>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>