1. Flexboxとは？
Flexbox（フレックスボックス）は、要素を柔軟に並べたり、間隔を調整したり、中央揃えを簡単にできるCSSのレイアウト方法です。特に、レスポンシブデザイン（スマホ対応）に強いのが特徴です。
ポイント
- 要素を一列や一列ずつ並べたいときに便利
- 高さや幅をそろえるのが簡単
- 複雑なレイアウトでもコードがスッキリする
2. Flexboxの基本構造
Flexboxを使うには、親要素（コンテナ）に display: flex; を設定します。
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
.container {
display: flex;
}
.item {
background: #4fc3f7;
padding: 20px;
margin: 10px;
color: #fff;
}
これだけで、子要素が横並びになります！
3. よく使うFlexboxプロパティまとめ
【親要素に使うプロパティ】
| プロパティ | 効果 | 例 |
|---|---|---|
display: flex; | Flexboxを使う | display: flex; |
flex-direction | 並べる向きを決める | row（横）/ column（縦） |
justify-content | 主軸（横or縦）に沿った位置揃え | center（中央揃え）、space-between（均等配置） |
align-items | 交差軸（横or縦）に沿った揃え | center（中央）、stretch（高さを均等に伸ばす） |
【子要素に使うプロパティ】
| プロパティ | 効果 | 例 |
|---|---|---|
flex-grow | 空きスペースをどれだけ伸ばすか | flex-grow: 1;（同じ幅に広がる） |
flex-shrink | スペースが足りないとき縮む度合い | flex-shrink: 0;（縮まない） |
flex-basis | 最初のサイズ指定 | flex-basis: 200px;（初期幅200px） |
4. 実例：センター配置（超よく使う！）
画面の中央に要素を置きたいとき、Flexboxならたったこれだけ！
<div class="center">
<p>中央に表示！</p>
</div>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #e0f7fa;
}
-
justify-content: center;→ 横方向に中央揃え -
align-items: center;→ 縦方向に中央揃え
height: 100vh; は、画面の高さいっぱいにするプロパティです。
5. Flexboxのよくある失敗ポイント
◆ 親要素に display: flex; を忘れない
Flexboxは親に設定しないと機能しません。
◆ flex-direction の初期値は row
デフォルトは横並びなので、縦並びにしたいときは flex-direction: column; を設定しよう。
◆ 子要素に幅や高さを決めるときは flex を活用
幅を固定したいときは、flex: 0 0 200px; のように細かくコントロールできるよ！
6. まとめ
Flexboxを使うと、これまで難しかったレイアウトがとても簡単になります。しかも、スマホにも対応しやすいので、今後Web制作をしていくなら必須の技術です！
次回は、さらに複雑なレイアウトも作れるCSS Gridについて詳しく解説します！ お楽しみに！✨
この記事が役に立ったら、ぜひシェアやブックマークをお願いします！
Grid基本はこちらから
コメント