flex-shrink プロパティ
flex-shrink プロパティは、フレックスコンテナ内で空きスペースが不足した場合に、フレックスブロックが隣接する要素に対してどれだけ縮小するかを定義します。
例えば、フレックスコンテナ内のすべてのフレックスブロックが flex-shrink:1 の場合、それらは同じサイズになります。一方のブロックが flex-shrink:2 の場合、そのブロックは他のすべてのブロックよりも 2 倍小さくなります。
適用対象： 特定の flex ブロック。
このプロパティは、短縮プロパティである flex の一部です。
構文
セレクター {
flex-shrink: 正の数;
}
デフォルト値： 1。
例
3 つの要素があるとします。各要素の幅は 200px で、合計 600px です。これは親コンテナの幅 350px よりも大きいです：
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex-shrink: 1;
}
.elem2 {
flex-shrink: 2;
}
.elem3 {
flex-shrink: 3;
}
:
次の式を使用して、負の空きスペースを計算してみましょう：
600px - 350px = 250px
各要素の flex-shrink プロパティ値を考慮した、加重された要素幅の合計は次のようになります：
200px * 1 + 200px * 2 + 200px * 3 = 1200px次に、最初の要素がどれだけ縮小するかを決定します：
250px * 1 (flex-shrink) * 200 (width) / 1200 = 41.6px2番目の要素：
250px * 2 (flex-shrink) * 200 (width) / 1200 = 83.3px3番目の要素：
250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px
つまり、flex-shrink の値が 3 である3番目の要素は、他の要素よりも大きく縮小することになります。
関連項目
-
フレックスブロックの軸方向を設定するプロパティ：
flex-direction,
-
主軸に沿った配置を設定するプロパティ：
justify-content,
-
交差軸に沿った配置を設定するプロパティ：
align-items,
-
フレックスブロックの折り返しを設定するプロパティ：
flex-wrap,
-
flex-direction と flex-wrap の短縮形であるプロパティ：
flex-flow,
-
フレックスブロックの順序を設定するプロパティ：
order,
-
単一ブロックの配置を設定するプロパティ：
align-self,
-
特定のフレックスブロックのサイズを設定するプロパティ：
flex-basis,
-
フレックスブロックの「拡張」を設定するプロパティ：
flex-grow,
-
flex-grow, flex-shrink, flex-basis の短縮形であるプロパティ：
flex,
