目次
- Flexbox の基本：縦方向・横方向の考え方
- 横並び（row のとき）
- 縦並び（column のとき）
- 1. 横並び（row）のとき：上・中央・下に揃える
- 上揃え（align-items: flex-start）
- 中央揃え（align-items: center）
- 下揃え（align-items: flex-end）
- 2. 横並びで「左右に揃える」「中央寄せ」も併用可能
- 3. 縦並び（column）の場合：揃え方が逆になる
- 上揃え（justify-content: flex-start）
- 中央揃え（justify-content: center）
- 下揃え（justify-content: flex-end）
- 4. よくある失敗ポイント
- 親に height がないと揃わない
- 子要素に margin-top: auto; を使う場合の挙動
- まとめ
Flexbox の魅力の ひとつは
要素を簡単に揃えられること（位置揃え） にあります。
しかし、初心者の方がよくつまずくのが、
- align-items と justify-content の違い
- 上揃え・中央揃え・下揃えの正しいやり方
- 縦並び・横並びでの挙動の違い
この記事では 最もわかりやすく これらを整理して解説します。
Flexbox の基本：縦方向・横方向の考え方
Flexbox の位置揃えは “方向（flex-direction）” によって意味が変わります。
横並び（row のとき）
- 主軸（メイン軸）＝横方向
- 交差軸（クロス軸）＝縦方向
縦並び（column のとき）
- 主軸＝縦方向
- 交差軸＝横方向
そして、揃え方はこう対応します：
| プロパティ | どの方向を揃える？ |
|---|---|
justify-content |
主軸（main-axis） |
align-items |
交差軸（cross-axis） |
つまり、flex-direction が row（横並び）か column（縦並び）か で役割が変わるわけです。
1. 横並び（row）のとき：上・中央・下に揃える
横並びがデフォルトなので、まずはこちらから。
上揃え（align-items: flex-start）
<div class="flex top">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>.flex {
display: flex;
height: 200px;
background: #f2f2f2;
}
.flex.top {
align-items: flex-start;
}
.box {
width: 80px;
padding: 20px;
background: #4087bf;
color: #fff;
margin: 5px;
}要素が 上端に揃う
中央揃え（align-items: center）
.flex.center {
align-items: center;
}上下中央に配置される
下揃え（align-items: flex-end）
.flex.bottom {
align-items: flex-end;
}要素が 下端に揃う
2. 横並びで「左右に揃える」「中央寄せ」も併用可能
- 左寄せ →
justify-content: flex-start - 右寄せ →
justify-content: flex-end - 水平中央 →
justify-content: center - 均等配置 →
justify-content: space-between
.flex.center-both {
justify-content: center;
align-items: center;
}3. 縦並び（column）の場合：揃え方が逆になる
flex-direction: column; を指定した場合、
上下の揃え方は justify-content が担当になります。
<div class="flex-column middle">
<div class="box">A</div>
<div class="box">B</div>
</div>.flex-column {
display: flex;
flex-direction: column;
height: 300px;
}上揃え（justify-content: flex-start）
.flex-column.top {
justify-content: flex-start;
}中央揃え（justify-content: center）
.flex-column.middle {
justify-content: center;
}下揃え（justify-content: flex-end）
.flex-column.bottom {
justify-content: flex-end;
}4. よくある失敗ポイント
親に height がないと揃わない
Flex は 空間がある場合にだけ揃えられる ので、高さ指定が必須です。
.flex {
height: 200px; /* これがないと上下揃えは不可 */
}子要素に margin-top: auto; を使う場合の挙動
子要素が勝手に下へ吸い寄せられる場合は
margin-top: auto; の指定が悪さをしていることがあります。
まとめ
Flex の位置揃えは方向で変わる！
| 並び方向 | 上下揃えの方法 |
|---|---|
| row（横） | align-items |
| column（縦） | justify-content |