この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
flex-basis とは
flex-basis は、flex-grow や flex-shrink による余白の計算が行われる前の、アイテムの基本的なサイズを指定するプロパティです。
flex-basis と width の違い
width は常に「幅」を指定するのと違い、flex-basis は、主軸の方向によって「幅」または「高さ」を指定します。
-
flex-dirextion: row（横並び）の場合：「幅」として機能 -
flex-direction: column（縦並び）の場合：「高さ」として機能
Flexアイテムに width と flex-basis の両方が指定された場合、flex-basis が優先されます。flex-basis は flex レイアウトにおける「公式の基本サイズ」と考えると分かりやすいかもしれません。
flex ショートハンド
flex プロパティは、これまで学んだ3つのプロパティを一行で書けるショートハンド（短縮系）です。
flex: <flex-grow> <flex-shrink> <flex-basis> の順で値を指定します。
例えば、flex: 1 1 auto; の場合、
-
flex-growが1：コンテナに余白があれば伸びる（割合1） -
flex-shrinkが1：コンテナのスペースが足りなければ、縮む（割合1） -
flex-basisがauto：基本サイズは自動で決まる（コンテナの大きさやwidthの値が使われる）
作成した回答
flex: 0 1 auto;
-
flex-growが0：アイテムは伸びない（デフォルト） -
flex-shrinkが1：アイテムのスペースが足りなければ、縮む（割合1） -
flex-basisがauto：アイテムの基本サイズは、自身のwidthやコンテンツのサイズから自動で決まる
flex: 1 0 200px;
flex-grow が 1：アイテムに余白があれば伸びる（割合1）
-
flex-shrinkが0：アイテムは絶対に縮まない -
flex-basisが200px：アイテムの基本サイズは200px