flex

/* 伸長も縮小もしない（初期値） */
.item { flex: 0 1 auto;}

/* 余白を均等に分配して伸長 */
.item-grow { flex: 1;}

/* 固定サイズ（伸縮しない） */
.item-fixed { flex: none;}

/* 基本200px、余白があれば伸長、スペースが足りなければ縮小 */
.item-flexible { flex: 1 1 200px;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

22 以降 ○

21 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 △

prefix『-ms-』が必要

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『flex』はフレックスアイテムの伸縮動作を一括で指定するショートハンドプロパティです。CSS仕様では、個別の『flex-grow』『flex-shrink』『flex-basis』を使うよりも『flex』ショートハンドの使用が推奨されています。省略した値に適切な初期値が設定されるため、意図しない動作を防ぎやすいためです。

『flex: 1;』は『flex: 1 1 0;』に展開されます。つまり『flex-basis』が『0』になります。これは個別に『flex-grow: 1;』だけを指定した場合（『flex-basis: auto』のまま）とは異なる挙動になります。

/* flex: 1; → flex-basis: 0 → 内容に関係なく均等幅 */
.item-a { flex: 1;}

/* flex-grow: 1; → flex-basis: auto → 内容に応じた幅 + 余白分配 */
.item-b { flex-grow: 1;}

均等幅にしたい場合は『flex: 1;』、内容のサイズを維持しつつ余白を分配したい場合は『flex: auto;』を使います。

.layout { display: flex;}
.sidebar-left { flex: 0 0 200px;}   /* 左サイドバー: 固定200px */
.main-content { flex: 1;}            /* メイン: 残りすべて */
.sidebar-right { flex: 0 0 150px;}  /* 右サイドバー: 固定150px */

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.card {
    flex: 1 1 300px;  /* 最低300px、余白は均等分配 */
}

IE10/IE11では『flex』ショートハンドの解釈にバグがあります。特に『flex: 1;』が正しく動作しない場合があるため、IE対応が必要な場合は『flex: 1 1 0%;』のように『flex-basis』に単位（%）を付けて明示的に指定するのが安全です。