【CSS Modules】flex-basisプロパティの使い方

flex-basisプロパティは、CSSのFlexboxレイアウトにおいて、フレックスアイテムの初期サイズを保持するプロパティです。このプロパティは、フレックスコンテナ内に配置される個々のアイテムが、拡大や縮小が行われる前に、どれくらいの基本的な空間を占めるかを指定するために使用されます。

具体的には、フレックスコンテナの主軸（メイン軸）の方向に対して、アイテムの初期サイズを設定します。例えば、主軸が横方向であれば幅を、縦方向であれば高さを決定するのに使われます。この初期サイズは、指定された値に応じて決まります。例えば、100pxのような固定長で指定したり、50%のように親要素に対する割合で設定したりできます。また、autoという値を指定すると、そのアイテムの内容のサイズや、通常のwidthやheightプロパティで設定された値に基づいて自動的にサイズが決定されます。contentという値は、アイテムの内容のサイズのみに基づいて決定します。

flex-basisは、flex-grow（アイテムが余白をどのように分け合って拡大するか）やflex-shrink（アイテムがスペースが足りないときにどのように縮小するか）といったプロパティと密接に関連しています。アイテムの最終的なサイズは、まずflex-basisで初期サイズが決定され、その後にflex-growやflex-shrinkのルールに従って、利用可能な空間に合わせて柔軟に調整されます。これにより、開発者は、様々な画面サイズやデバイスに対応するレスポンシブで柔軟なレイアウトを効率的に構築することができます。直接widthやheightを指定するよりも、コンテナの状況に応じた柔軟な要素のサイズ調整が可能になる点が特徴です。

Copy
1.item {
2  flex-basis: 200px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません