Widely available YES。全ブラウザで長年サポートされており、安心して使用できる。
レイアウト Widely available

Flexbox layout

従来の float や inline-block によるレイアウトでは、垂直方向の中央揃えや等分配置が困難だった。Flexbox は親要素に display: flex を指定するだけで、子要素の配置・整列・伸縮を宣言的に制御できる。レスポンシブデザインにおけるナビゲーションやカードの横並びなど、一次元レイアウトの標準手法となっている。

レイアウト整列

概要

従来の float や inline-block によるレイアウトでは、垂直方向の中央揃えや等分配置が困難だった。Flexbox は親要素に display: flex を指定するだけで、子要素の配置・整列・伸縮を宣言的に制御できる。レスポンシブデザインにおけるナビゲーションやカードの横並びなど、一次元レイアウトの標準手法となっている。

対応ブラウザ

デスクトップ

Chrome 29+
Edge 12+
Safari 9+
Firefox 20+

モバイル

Chrome Android 29+
Safari iOS 9+
Firefox Android 20+

基本構文

CSS 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1 1 auto;
}

実務での使いどころ

  • ナビゲーションバー

    ロゴ・メニュー項目・アクションボタンを水平に配置し、余白を自動的に調整するレスポンシブなナビゲーション。

  • カードの横並びレイアウト

    複数のカードを横並びにし、高さを揃えつつ余剰スペースを均等に分配する。

注意点

  • flex-wrap を指定しないとアイテムが一行に押し込まれ、はみ出す場合がある。
  • order プロパティで視覚的な順序を変えると、キーボード操作やスクリーンリーダーの読み上げ順との乖離が生じる。

アクセシビリティ

  • order プロパティによる並び替えは視覚のみに影響し、DOM 順序（読み上げ順・タブ順）は変わらない。視覚と論理順序を一致させるよう注意する。

参考リンク