CSS3

プロパティ

flex

→●、mdn

flex アイテム： 略式プロパティ。

flex プロパティは、次の成分からなる、flex 可能なサイズを指定する：

• flex 伸長係数、flex 縮短係数 ─ これらは、flex 係数 と総称される。
• flex 基底

ボックスが flex アイテムである場合、その主サイズの決定には、主サイズ プロパティの代わりに flex にあたる。ボックスが flex アイテムでない場合、flex の効果はない。

none

キーワード none は、「0 0 auto」に展開される。

¶図省く

<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>

<DIV style="border:1px solid black; width:150px; height:100px;
 display:flex;
 flex-wrap:wrap;
 justify-content:normal;
 justify-items:normal;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="flex:50px; border:1px solid red;">2</DIV>
 <DIV style="flex:0.2 50px; border:1px solid red;">3</DIV>
</DIV>

¶

<DIV style="border:1px solid black; width:150px; height:100px;
 display:flex;
 flex-wrap:wrap;
">
 <DIV style="flex-basis:50px; border:1px solid black;">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">3</DIV>
</DIV>

flex の個々の成分の初期値による値は、「flex: 0 1 auto」に等価になる。

注記： flex 略式プロパティから省略されたときの、flex-grow、flex-basis の初期値は、いずれも、それらの個別の下位プロパティの既定値とは異なる。これは、最もよくある事例に、flex 略式プロパティがより良く適応できるようにするために、そのようにされている。

［2 個の flex 係数］が前置されていない、単位なしの 0 は、flex 係数として解釈されるものとする。誤解釈や無効な宣言を避けるため、作者は、単位を伴う 0 <'flex-basis'> 成分を指定するか、あるいは その前に 2 個の flex 係数を置かなければならない。

関連

display、order、flex-direction、flex-flow、flex-wrap、align-content、align-items、align-self。

テスト