CSS3

プロパティ

flex-basis

→●、mdn

flex アイテムのサイズ基底。

注意： 作者には、flex-basis を直に利用せずに、flex 略式プロパティを利用して flex 能を制御することが奨励される。この略式プロパティは、よくある用途に適応するように、未指定な成分を正しく設定し直すので。

flex-basis プロパティは、flex 基底を設定する。それは width／height プロパティが受容する値に加えて、値 content も受容する。

上に定義された auto、content 以外のすべての値に対しては、横組みの下では、flex-basis は width と同じ仕方で解決される [CSS2]。ただし、値が width 用の auto に解決される場合は、代わりに flex-basis 用の content に解決される。例えば、flex-basis に対する百分率値は、flex アイテムの包含ブロック（すなわち，その flex コンテナ）を基準に解決され、包含ブロックのサイズが不定である場合の flex-basis の使用値は、content になる。別の帰結として、box-sizing など 他から指定されない限り、flex-basis は内容ボックスのサイズを決定する。

content

flex アイテムの内容に基づく自動的サイズを指示する（概して、最大内容サイズに等価になるが、［選好縦横比、内在的サイズ法拘束、直交フロー］を取り扱うための調整も伴う ― 詳細は § flex レイアウトアルゴリズム を見よ）。

注記： この値は、この仕様の初期リリースには無かったものであり、一部の古い実装ではサポートされない。等価な効果は、主サイズ プロパティ に auto をあてがった上で、auto を利用して得られる。

<DIV style="border:1px solid black; width:200px; height:100px;
 display:flex; flex-wrap:wrap;
">
 <DIV style="flex-basis:100px; border:1px solid black">DIV1</DIV>
 <DIV style="flex-basis:content; border:1px solid red">DIV2</DIV>
 <DIV style="flex-basis:content; border:1px solid red">DIV3</DIV>
</DIV>

<DIV style="border:1px solid black; width:200px; height:200px;
 display:flex; flex-direction:column;
">
 <DIV style="flex-basis:50px; border:1px solid black">DIV1</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">DIV2</DIV>
 <DIV style="flex-basis:content; border:1px solid red">DIV3</DIV>
</DIV>

<'width'> ○

他のすべての値に対しては、width、height に対するときと同じ仕方で解決される。

<DIV style="border:1px solid black; width:200px; height:100px;
 display:flex; flex-wrap:wrap;">
 <DIV style="flex-basis:100px; border:1px solid red">DIV1</DIV>
 <DIV style="flex-basis:30%; border:1px solid red">DIV2</DIV>
 <DIV style="flex-basis:20mm; border:1px solid red">DIV3</DIV>
</DIV>

<DIV style="border:1px solid black; width:200px; height:200px;
 display:flex; flex-direction:column;
">
 <DIV style="flex-basis:50px; border:1px solid red">DIV1</DIV>
 <DIV style="flex-basis:70px; border:1px solid red">DIV2</DIV>
 <DIV style="border:1px solid black">DIV3</DIV>
</DIV>

auto

flex アイテムにこのキーワードが指定された場合、flex-basis の使用値は、主サイズ プロパティの値から取得される。その値も auto である場合の使用値は、content になる。

<DIV style="border:1px solid black; width:200px; height:100px;
 display:flex; flex-wrap:wrap;
">
 <DIV style="flex-basis:100px; border:1px solid black">DIV1</DIV>
 <DIV style="flex-basis:auto; border:1px solid red">DIV2</DIV>
 <DIV style="flex-basis:auto; border:1px solid red">DIV3</DIV>
</DIV>

flex 略式プロパティから省略された場合の指定値は、0 になる。

関連

flex-grow、flex-shrink。order。

テスト