FlexboxレイアウトパターンUIデザイン：ナビゲーション・カード・フォームの実践設計

CSSのFlexboxは、1次元のレイアウト（行または列方向）を柔軟に制御できるレイアウトシステムです。ナビゲーションバー・ボタングループ・カード内のレイアウト・フォームの整列など、UIデザインの多くの場面でFlexboxが活躍します。本記事では、UIでよく使うFlexboxのパターンをコード例とともに解説します。

Flexboxの基本概念

主軸と交差軸：

Flexboxには「主軸（main axis）」と「交差軸（cross axis）」の概念があります。flex-direction: row（デフォルト）では水平方向が主軸、垂直方向が交差軸になります。flex-direction: column では逆になります。

justify-content（主軸の配置）：

• flex-start: 先頭揃え
• flex-end: 末尾揃え
• center: 中央揃え
• space-between: 両端に要素を配置し、等間隔で並べる
• space-around: 各要素の周囲に均等なスペース
• space-evenly: すべての隙間が均等

align-items（交差軸の配置）：

• stretch: デフォルト。交差軸方向に伸ばす
• center: 交差軸の中央
• flex-start: 交差軸の先頭
• flex-end: 交差軸の末尾
• baseline: テキストのベースラインで揃える

よく使うFlexboxパターン

ナビゲーションバー

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
}

.navbar-brand { flex-shrink: 0; }
.navbar-menu { display: flex; gap: 8px; }
.navbar-actions { display: flex; gap: 8px; margin-left: auto; }

中央揃え（絶対センタリング）

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

カードコンポーネント内レイアウト

.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* グリッド内で高さを揃える */
}

.card-content {
  flex: 1; /* コンテンツエリアが余白を占有 */
}

.card-footer {
  margin-top: auto; /* フッターを常に下部に固定 */
}

このパターンは、テキスト量が異なるカードのフッターボタンを常に下部に揃えるために非常によく使われます。

アイコン＋テキストの水平配置

.icon-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

フォームのラベルと入力フィールドの縦並び

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

ボタンのアイコンとテキスト中央揃え

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

flex プロパティの使い方

`flex: 1`（flex-grow: 1, flex-shrink: 1, flex-basis: 0%）：

コンテナの残りスペースを等分に占有します。複数要素に設定すると等幅になります。

/* 左右サイドバー固定・メインが可変 */
.layout { display: flex; }
.sidebar { width: 240px; flex-shrink: 0; }
.main { flex: 1; min-width: 0; } /* min-width:0 はテキストオーバーフロー対策 */

`flex-shrink: 0`：

コンテナが縮んでも要素を縮小しません。ロゴ・アイコンなど固定幅を維持したい要素に使います。

`flex-wrap: wrap`：

コンテナ幅を超えた要素を折り返します。タグリスト・ボタングループ等で活用します。

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

レスポンシブFlexboxパターン

縦↔横の切り替え：

.responsive-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .responsive-row {
    flex-direction: row;
    align-items: center;
  }
}

順序の入れ替え（order プロパティ）：

モバイルでは画像を先に、テキストを後に表示し、デスクトップでは順序を逆にするような場合に order プロパティが役立ちます。ただし、DOMの順序はスクリーンリーダーが参照するため、アクセシビリティの観点から慎重に使います。

FlexboxとCSS Gridの共存

実際のUIでは、Flexboxで組んだコンポーネント（ナビゲーションバー・ボタン等）をCSS Gridで構成したページレイアウトに配置するという形で、両者が共存します。「ページ全体のマクロレイアウト = CSS Grid、コンポーネント内のミクロレイアウト = Flexbox」というのが現代のベストプラクティスです。

まとめ

FlexboxはUIの細かなレイアウト制御に欠かせないCSSの機能です。基本的な主軸・交差軸の概念を理解した上で、ナビゲーション・カード・フォームなどの頻出パターンをマスターすることで、デザインの意図を正確に実装できるレイアウトが完成します。UI ZUKANではFlexboxを活用したUIコンポーネントの実装例を多数掲載しています。