Web制作で「横並び・縦並び・中央寄せ・等間隔配置」を自由に行いたいときに使うのが
Flexbox（フレックスボックス） です。
Flexboxは、CSSの中でも最強レベルに使われるレイアウト機能で、
習得すると UI レイアウトが一気に簡単になります。
この記事では、初心者でも理解できるように丁寧に解説していきます！
Flexbox の基本（display: flex）
Flexboxを使うには、まず 親要素に display:flex を指定 します。
.container {
display: flex;
}すると、子要素が 横並び になります。
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>ちなみに親要素と子要素というのがあります。
既になんとなくイメージできてる方もいると思いますが、解説します。
例のコードでは、<div class=”container”>が親要素。
<div class=”item”>A</div>などが子要素です。
htmlを書く際に、要素の中に色々と他の要素を書いたりしますよね。
要は外枠にある要素が親要素。内側に属する要素は子要素です。
親要素にCSSを指定すると、子要素にも影響が出ます。
その影響を良くするも悪くするも自分の腕次第です。
Flexbox のプロパティは「親」と「子」で分かれる
親要素（flex container）
- flex-direction
- justify-content
- align-items
- flex-wrap
- gap
子要素（flex item）
- flex
- flex-grow
- flex-shrink
- flex-basis
- align-self
この記事ではまず 親要素のプロパティ を中心に解説します。
方向を決める（flex-direction）
.container {
flex-direction: row; /* 横並び（デフォルト） */
/* flex-direction: column; 縦並び */
}横方向（主軸）の並び方を決める（justify-content）
要素を横方向にどう配置するか。
.container {
justify-content: center; /* 中央揃え */
/* justify-content: flex-start; 左寄せ（デフォルト） */
/* justify-content: flex-end; 右寄せ */
/* justify-content: space-between; 要素間を均等に */
/* justify-content: space-around; 両端も少し空けて均等に */
}
縦方向（交差軸）の揃え方を決める（align-items）
.container {
align-items: center; /* 縦方向の中央揃え */
/* align-items: flex-start; 上揃え */
/* align-items: flex-end; 下揃え */
/* align-items: stretch; 高さを揃える（デフォルト） */
}要素の間隔を斜めずらしなしで開ける（gap）
.container {
display: flex;
gap: 20px;
}→ margin を使わず整った余白を作れるので
gap が大活躍 します。
折り返しを許可する（flex-wrap）
.container {
flex-wrap: wrap; /* 折り返す */
}→ スマホ対応にも必須。
子要素の伸び縮み（flex）
最も重要なプロパティ。
.item {
flex: 1;
}→ 残りのスペースを均等に伸ばす。
例：
.item {
flex: 1; /* 3つ並べれば等間隔で1/3ずつになる */
}実例①：横並びのメニュー（超よく使う）
HTML：
<nav class="menu">
<a href="#">ホーム</a>
<a href="#">ブログ</a>
<a href="#">お問い合わせ</a>
</nav>CSS：
.menu {
display: flex;
justify-content: space-between;
background: #f5f5f5;
padding: 10px;
}
.menu a {
text-decoration: none;
color: #333;
}→ よくあるヘッダーメニュー完成！
実例②：ボタンを中央揃え
.btn-area {
display: flex;
justify-content: center;
}実例③：縦並びのカードを横に変える
.cards {
display: flex;
gap: 20px;
}
.card {
flex: 1;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
}→ 複数カードが均等に並ぶ！
実例④：2カラムレイアウト（左右分割）
.layout {
display: flex;
gap: 20px;
}
.main {
flex: 3;
}
.sidebar {
flex: 1;
}→ 「メイン3：サイド1」の定番レイアウトが完成。
実例⑤：スマホで縦並びにする
HTML はそのまま、CSS だけ分岐させる。
.layout {
display: flex;
gap: 20px;
}
/* スマホ（600px以下） */
@media (max-width: 600px) {
.layout {
flex-direction: column;
}
}→ PC では横並び
→ スマホでは縦並び
というレスポンシブが簡単に実装できます。
Flexbox が便利な理由まとめ
- 横並び・縦並びが一瞬でできる
- 中央寄せが簡単
- 要素の間隔や揃え方を自由に変えられる
- 等間隔レイアウトが簡単
- スマホ対応にも強い
- UI デザインのほぼすべてに使える
この記事のまとめ
- display:flex を指定すると横並びに
- flex-direction → 並ぶ方向
- justify-content → 主軸の揃え（横）
- align-items → 交差軸の揃え（縦）
- gap → 余白をきれいに調整
- flex:1 → 等間隔レイアウトを自動で作る
Flexbox が使えるようになると、
CSS のレイアウトが本当に楽になります。
コメント