CSSのflexboxで要素を横並びにする基本（display: flex）

ブロック要素を横に並べたいとき、最も手軽で確実な方法が display: flex だ。親要素に flex を指定するだけで子要素が横並びになり、間隔や配置も柔軟に制御できる。

基本の横並び

親要素に display: flex を指定すると、直接の子要素（フレックスアイテム）が自動的に横並びになる。

<div class="flex-container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.flex-container {
  display: flex;
  gap: 12px;
}
.item {
  background: #6366f1;
  color: #fff;
  padding: 16px 24px;
  border-radius: 6px;
  font-weight: bold;
}

gap プロパティで子要素間のスペースを設定している。margin で個別に指定するより管理しやすい。

主軸と交差軸

flexbox には 2 つの軸がある。要素が並ぶ方向を主軸（main axis）、それに直交する方向を交差軸（cross axis）と呼ぶ。初期状態では主軸が横方向、交差軸が縦方向になっている。

justify-content で主軸方向の配置を制御する

子要素を主軸上のどこに置くかを決めるのが justify-content だ。

<div class="jc-demo between">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.jc-demo {
  display: flex;
  padding: 12px;
  background: #f1f5f9;
  border-radius: 6px;
}
.between {
  justify-content: space-between;
}
.item {
  background: #6366f1;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
}

space-between を指定すると、最初と最後の要素が端に寄り、残りの要素が均等に配置される。ナビゲーションバーでロゴを左端、メニューを右端に配置するパターンでよく使われる。

space-around や space-evenly もあるが、実務で使う頻度が高いのは上の 3 つと space-between だ。

align-items で交差軸方向の配置を制御する

主軸に対して垂直方向の揃え方を決めるのが align-items になる。高さの異なる要素を縦方向に揃えるときに欠かせない。

.flex-container {
  display: flex;
  align-items: center;
  min-height: 100px;
}

center を指定すると、高さの異なる子要素が縦方向の中央に揃う。初期値は stretch で、子要素が親の高さいっぱいに引き伸ばされる。

flex-wrap で折り返す

初期状態では子要素は 1 行に収まるよう縮小される。要素数が多いとき、折り返して複数行にするには flex-wrap: wrap を使う。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.item {
  flex: 0 0 calc(33.333% - 8px);
}

この例では各アイテムの幅を約 3 分の 1 に設定し、3 列で折り返すレイアウトを実現している。calc の中で gap 分を引くのが正確なサイズ調整のポイントだ。

flex プロパティで伸縮を制御する

子要素の flex プロパティは、余白をどう分配するかを決める。flex: 1 を指定すると、利用可能なスペースを均等に分け合う。

<div class="flex-grow-demo">
  <div class="sidebar">sidebar</div>
  <div class="main">main（flex: 1）</div>
</div>

.flex-grow-demo {
  display: flex;
  gap: 12px;
  font-size: 14px;
}
.sidebar {
  background: #e2e8f0;
  padding: 16px;
  border-radius: 6px;
  width: 120px;
}
.main {
  background: #dbeafe;
  padding: 16px;
  border-radius: 6px;
  flex: 1;
}

サイドバーは固定幅 120px、メインコンテンツが残りの幅をすべて占める。この「固定幅 + 可変幅」の組み合わせは、実務のレイアウトで非常によく登場するパターンだ。

flexbox は横並びだけでなく、中央寄せや均等配置など多くのレイアウト課題を解決する。まずは display: flex と gap、justify-content、align-items の 4 つを覚えておけば、大半のケースに対応できる。