CSSでのフレックスブロックの圧縮調整
デフォルトでは、すべての要素から、要素の幅に比例した断片が取り除かれます。
しかし、一部の要素からより大きな断片またはより小さな断片が取り除かれるようにすることができます。
このために、特別なプロパティflex-shrinkが存在します。
このプロパティは、上記の式に基づいて取り除く断片を計算する際に、要素の幅に乗算されるある種の重みを表します。
たとえば、要素の幅が200pxで、そのflex-shrinkが3の場合、要素の重み付けされた（つまり重みが乗算された）幅は次のようになります：
200px * 3 = 600px
flex-shrinkを考慮した式は次のようになります：負の余白スペース * (要素の重み付け幅 / すべての要素の重み付け幅の合計)。
例を見てみましょう。4つの要素があるとします。
最初の要素の幅が400pxで、flex-shrinkが2であるとします。
残りの要素の幅は200pxで、それらのflex-shrinkは1です。
親要素の幅を900pxとします。
要素の合計幅は次のとおりです：
400px + 3 * 200px = 1000px負の余白スペースは次のようになります：
1000px - 900px = 100px要素の合計重み付け幅は次のとおりです：
400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px最初の要素の重み付け幅は次のとおりです：
400px * 2 = 800px最初の要素から取り除かれる断片は次のようになります：
100px * (800px / 1400px) = 100px * 0.57 = 57.14px要素の幅は次のようになります：
400px - 57.14px = 342.86px ~ 343px残りの各要素の重み付け幅は次のとおりです：
200px * 1 = 200px各要素から取り除かれる断片は次のようになります：
100px * (200px / 1400px) = 100px * 0.1428 = 14.28px ~ 14.3px要素の幅は次のようになります：
200px - 14.28px = 185.72px ~ 186px説明されたブロックを実装し、測定によって要素の幅が実際に私たちが計算した値と等しいことを確認してください。
ブロックの幅を計算し、その後測定して計算を確認してください：
<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: 200px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-shrink: 2;
}
.elem2 {
width: 100px;
flex-shrink: 1;
}
.elem3 {
width: 100px;
flex-shrink: 1;
}
ブロックの幅を計算し、その後測定して計算を確認してください：
<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: 200px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-shrink: 3;
}
.elem2 {
width: 100px;
flex-shrink: 2;
}
.elem3 {
width: 100px;
flex-shrink: 1;
}
ブロックの幅を計算し、その後測定して計算を確認してください：
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 300px;
flex-shrink: 3;
}
.elem2 {
width: 200px;
flex-shrink: 2;
}
.elem3 {
width: 200px;
flex-shrink: 1;
}
.elem4 {
width: 200px;
flex-shrink: 1;
}
