レイアウト
flex-basis
flex-basis は、フレックスボックスの項目に書いて、余りを分けて伸ばしたり、はみ出した分を縮めたりする前の、項目の元の大きさ（横に並べたときは幅）を指定します。
構文
content | <'width'>プレビュー
コード
.box {
display: flex;
}
.box > :nth-child(2) {
flex-basis: 50%;
}コントロール
解説
値の書き方
auto：項目のwidth（縦に並べたときはheight）を使います。初期値です。width もautoなら、中身の幅になります。content：width にかかわらず、中身の幅にします。- 長さ・%：その幅にします。% は箱の中身の幅に対する割合です。
min-content・max-content・fit-content：widthと同じ意味です。
このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに flex-basis を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。項目はどれも幅が 3em で、縁取りした 2 の項目だけ元の大きさが変わります。auto では width の 3em、content では数字の幅になります。
width との違い
フレックスボックスの項目では、auto 以外の flex-basis は width より優先されます。縦に並べる flex-direction: column の箱では、height の代わりになります。どちらで決めた大きさも、そのあと flex-grow で伸びたり flex-shrink で縮んだりするので、最後の幅になるとは限りません。min-width・max-width は flex-basis より強く、伸び縮みしたあとの幅もその範囲に収めます。
flex ショートハンド
ふつうは flex ショートハンドで、flex-grow・flex-shrink とまとめて書きます。flex: 1 は flex-basis を 0% にするので、余りを全部 flex-grow の比で分けることになり、中身の量によらず項目を同じ幅にできます。flex: auto は flex-basis を auto にするので、中身の多い項目ほど広くなります。
このページで扱わない書き方
stretch は、このページのコントロールではまだ扱っていませんが、コードには書けます。箱の幅いっぱいを元の大きさにします。Chrome・Edge（138 以降）と Safari（27 以降）が対応していて、Firefox ではまだ使えません。