CSS3

値

<flex>

→●

flex 可能な長さ。

fr 単位の次元であり、格子コンテナの中の 残余空間 の割合分を表現する。fr 単位でサイズされている筋は flex 可能 と呼ばれる ― それらは、flex コンテナ内で［基底サイズ 0 にされた flex アイテム］が空間を埋めるときと同様に、残余空間 に呼応して flex するので。

free 空間の分配は、すべての flex 可能でない筋の筋サイズ法関数がそれらの最大に†達した後に生じる。可用な空間から それらの筋の合計サイズを差し引いた結果が 残余空間 になる。残余空間 は、flex にサイズされる筋たちに、各自の flex 係数に比例する割合で分割される。【† “達した”の意味は、§ 格子サイズ法 にて定義される。】

各筋の、残余空間 の持ち分は、

として算出できる。

¶省く

<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template:1fr 1.5fr/1fr 1.25fr 1.5fr;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>

テスト