💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSのspace-betweenで両端寄せする方法
📌
結論
justify-content: space-between で両端寄せにできます
📝 実際のコードはこちら
.header { display: flex; justify-content: space-between; }justify-contentの全パターン
| 値 | 配置 |
|---|---|
flex-start | 先頭寄せ |
flex-end | 末尾寄せ |
center | 中央 |
space-between | 両端寄せ、間は均等 |
space-around | 各要素の周囲に均等 |
定番の使い方
ヘッダーのロゴ左・メニュー右配置はspace-between の典型例です。
まとめ
・space-between で両端寄せ
・ヘッダーの左右配置に最適
演習で試してみよう
Flexboxで両端寄せを試してみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
Flexboxで子要素を両端寄せ（間に均等スペース）にしてください。
詰まったらヒント
justify-content: space-between;