Flexbox — 1行でレイアウトを整える

このトピックを終えると

Flexbox の主要なプロパティを理解し、水平/垂直方向の配置、間隔の調整を自由に行えるようになります。

display: flex 1行で済む

.container {
  display: flex;
}

この 1 行だけで、子要素が横並びに配置されます。float や inline-block を使って苦労していた時代に比べると画期的です。

主軸と交差軸

Flexbox には 2 つの軸があります。

主軸 (main axis): アイテムが配置される方向。デフォルトは横 (row)。 交差軸 (cross axis): 主軸と垂直な方向。デフォルトは縦。

.container {
  display: flex;
  flex-direction: row;    /* デフォルト: 横並び */
  flex-direction: column; /* 縦並び */
}

flex-direction を column に変更すると、主軸が縦になります。

主軸の配置: justify-content

主軸方向にアイテムをどのように配置するかを決定します。

.container {
  display: flex;
  justify-content: flex-start;    /* 開始点に配置 (デフォルト) */
  justify-content: center;        /* 中央に配置 */
  justify-content: flex-end;      /* 終了点に配置 */
  justify-content: space-between; /* 両端に配置し、均等に間隔をあける */
  justify-content: space-around;  /* 均等に間隔をあけ、両端にも余白を追加 */
}

space-between は、ナビゲーションバーでロゴとメニューを両端に配置する際によく使用されます。

交差軸の配置: align-items

交差軸方向にアイテムをどのように配置するかを決定します。

.container {
  display: flex;
  align-items: stretch;    /* コンテナの高さに合わせる (デフォルト) */
  align-items: center;     /* 垂直方向の中央に配置 */
  align-items: flex-start; /* 上端に配置 */
  align-items: flex-end;   /* 下端に配置 */
}

水平方向と垂直方向の中央に配置:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

この 3 行で完璧な中央配置ができます。

gap — 間隔

.container {
  display: flex;
  gap: 16px;
}

アイテム間の間隔を指定します。以前は margin で 1 つずつ調整していましたが、gap を使うと 1 行で解決できます。最後のアイテムの後に不要な margin が発生することはありません。

flex-wrap — 行折り返し

.container {
  display: flex;
  flex-wrap: wrap;
}

デフォルトでは、Flex アイテムは 1 行にすべて収まります。スペースが足りない場合、アイテムが押しつぶされます。flex-wrap: wrap を使うと、スペースが足りない場合に次の行に折り返します。カードグリッドを作成する際に便利です。

flex: 1 — 残りのスペースを埋める

.sidebar { width: 250px; }
.content { flex: 1; }

flex: 1 は、残りのスペースをすべて占有します。固定幅のサイドバーの横に、動的なコンテンツ領域を作成する際に使用します。

重要なポイント

display: flex 1 行で、子要素が横並びに配置されます。 justify-content は主軸、align-items は交差軸の配置です。 gap で間隔を、flex: 1 で残りのスペースを埋めることができます。