CSS3

プロパティ

flex-shrink

→●、mdn

flex アイテムのサイズ縮短度。

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

<number[0,∞]> ○

¶コンテナが圧縮されたとの縮小度。

flex-shrink プロパティは、flex 縮短係数を 供された <number> に設定する。

flex-shrink 下位プロパティを設定して、flex 縮短係数 を指定する。負な数は許容されない。

flex コンテナの中で負な free 空間が配分される際に、flex アイテムが他の一連の flex アイテムに比して どれだけ縮短することになるのかを決定する。省略されたときは、1 に設定される。負な free 空間を配分する際には、flex 縮短係数は、flex 基底で乗算される。

注記： 負な空間を配分する際には、flex 縮短係数は、flex 基底サイズで乗算されることに注意。これにより、負な空間は、アイテムが縮短できる量に比例するように配分され、例えば、大きいアイテムが相当に縮短されない限り、小さいアイテムが 0 まで縮短されないようにする。

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

コンテナが普通の状態

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

コンテナが圧縮された状態

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

関連

flex-basis、flex-grow。

テスト