flex-basis

/* 内容に基づく自動サイズ（初期値） */
.item { flex-basis: auto;}

/* 固定幅を指定 */
.item-fixed { flex-basis: 200px;}

/* パーセンテージで指定 */
.item-percent { flex-basis: 33.333%;}

/* 基本サイズを0にする（flex-growで均等分配する場合） */
.item-zero { flex-basis: 0;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

↑ prefix『-webkit-』が必要

21 以前 ×

Firefox

22 以降 ○

21 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

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

IE

11 ○

10 ×

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-basis』はフレックスアイテムに指定するプロパティで、『flex-grow』や『flex-shrink』による伸縮が行われる前の基本サイズを指定します。『flex-direction: row』の場合は幅、『column』の場合は高さに対応します。

フレックスアイテムでは『flex-basis』と『width』（または『height』）の両方が指定できますが、『flex-basis』が優先されます（『auto』を除く）。

フレックスアイテムのサイズ指定には、『width』よりも『flex-basis』（またはショートハンドの『flex』）を使うのが適切です。

/* flex-basis: 0で余白を完全均等に分配 */
.container { display: flex;}
.item {
    flex-grow: 1;
    flex-basis: 0;
    /* または flex: 1; と書いても同じ */
}

『flex-basis: auto』のままだと、アイテムの内容の長さによってサイズが変わります。『flex-basis: 0』にすると内容に関係なく均等な幅になります。

/* 最低300pxを確保し、余白があれば伸長する */
.card {
    flex: 1 1 300px;  /* grow:1  shrink:1  basis:300px */
}