📝
CSS基本講座5 フレックスボックス（Flexbox）
こんにちは！
今回は、CSSのレイアウトを非常に便利にしてくれる Flexbox（フレックスボックス） について解説します！
Flexbox を使うと
✅ 要素を横並びにしたり
✅ 中央にそろえたり
✅ スペースを均等に配置したり
が簡単にできちゃいます！
CSS基本講座5 フレックスボックス（Flexbox）
Flexboxとは？
📌 使いどころ
Flexboxは、複数の要素の配置や整列を自由自在にコントロールできるレイアウト方法です。
📖 使い方の基本
親要素 {
display: flex;
}
💡 例：子要素を横並びにする
よく使うプロパティ（親要素）
| プロパティ | 説明 | よく使う値 |
|---|---|---|
display |
フレックスレイアウトを有効にする | flex |
flex-direction |
並べる方向を指定 |
row, column
|
justify-content |
主軸（横方向）の並びを指定 |
flex-start, center, space-between
|
align-items |
交差軸（縦方向）の整列を指定 |
flex-start, center, stretch
|
flex-wrap |
要素を折り返すかどうか |
nowrap, wrap
|
よく使うプロパティ（子要素）
| プロパティ | 説明 | よく使う値 |
|---|---|---|
flex |
幅の伸び縮みのバランスを指定 |
1, 2, 0 1 auto
|
align-self |
個別に縦方向の位置を調整する |
center, flex-end など |
💡 例
✅ 中央ぞろえ + 均等配置
よく使うパターン例
✅ 横並び & 均等配置
display: flex;
justify-content: space-between;
✅ 縦並び
display: flex;
flex-direction: column;
まとめ
親要素のプロパティ
| プロパティ | 内容 |
|---|---|
display: flex |
フレックスを有効にする |
flex-direction |
並べる向きを指定する |
justify-content |
横方向の並び方を指定 |
align-items |
縦方向の整列を指定する |
flex-wrap |
折り返しの有無を指定する |
子要素のプロパティ
| プロパティ | 内容 |
|---|---|
flex |
幅のバランスを設定 |
align-self |
縦方向の位置を個別に調整 |
Flexbox は、CSSレイアウトの強い味方です！
慣れてくると、ほとんどのレイアウトが Flexbox だけで作れるようになります✨
ぜひ、いろんなパターンを試してみてくださいね！
Discussion