この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

`flex-basis` とは

flex-basis は、flex-grow や flex-shrink による余白の計算が行われる前の、アイテムの基本的なサイズを指定するプロパティです。

width は常に「幅」を指定するのと違い、flex-basis は、主軸の方向によって「幅」または「高さ」を指定します。

Flexアイテムに width と flex-basis の両方が指定された場合、flex-basis が優先されます。flex-basis は flex レイアウトにおける「公式の基本サイズ」と考えると分かりやすいかもしれません。

flex プロパティは、これまで学んだ3つのプロパティを一行で書けるショートハンド（短縮系）です。

flex: <flex-grow> <flex-shrink> <flex-basis> の順で値を指定します。

例えば、flex: 1 1 auto; の場合、

flex: 0 1 auto;

flex: 1 0 200px;
flex-grow が 1：アイテムに余白があれば伸びる（割合1）