🧭
✅ FlexboxとPositioningの基礎まとめ
✅ FlexboxとPositioningの基礎まとめ
📌 Flexboxとは？
要素を横または縦方向に整列し、
間隔やサイズを自動調整できるCSSレイアウト方式
🧱 基本的なFlexbox構造の例
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.wrapper {
display: flex;
}
✅ Flexboxの主要プロパティまとめ
🔹 親要素に設定するプロパティ
| プロパティ | 説明 |
|---|---|
display: flex; |
フレックスボックスを有効化 |
flex-direction |
並び方向（row、column） |
justify-content |
横方向の整列（center、space-betweenなど） |
align-items |
縦方向の整列（center、flex-startなど） |
gap |
アイテム間の間隔 |
🔹 子要素に設定するプロパティ
| プロパティ | 説明 |
|---|---|
flex |
スペースの比率を指定 |
align-self |
個別アイテムの整列を指定 |
🧭 配置とPositioningの概念
「1点を基準に横・縦に動かすには、基準ボックスが必要！」
1. 絶対位置（position: absolute）
- 親要素に
position: relativeが必要（基準点の役割） -
topやleftで位置を指定
2. 相対位置（position: relative）
- 自分の元の位置を基準に移動
- 子要素にとっては基準点の役割
💡 実践例：縦並び → 横並びに変更
<div class="wrapper">
<img src="a.jpg" />
<img src="b.jpg" />
<img src="c.jpg" />
</div>
.wrapper {
display: flex;
}
→ 縦に積み重なっていた画像が横に並ぶようになる
✅ まとめ
- Flexboxは横・縦の整列やスペース配置に非常に便利
-
absoluteは基準ボックスがあって初めて正確に配置可能 -
relativeは自身の位置基準で移動 + 子要素の基準にもなる
Discussion