Mar. 23rd,2021
プロパティについて
＃
概要
“flex-shrink”プロパティはフレキシブルボックスレイアウトでフレックス・コンテナから主軸方向にフレックス・アイテムがあふれる場合にフレックス・コンテナに収めるためにどれだけそのフレックス・アイテムを縮小するかを指定するプロパティです。
フレックス・アイテムの縮小量はフレックス・コンテナ内のそれぞれの“flex-shrink”プロパティの値を比率として配分されます。
“min-width”プロパティ、もしくは“min-height”プロパティによって最小寸法が指定されていない場合、フレックス・アイテムはコンテンツを内包できる最小サイズ(許容される箇所ですべて折り返した時にコンテンツを内包できる最小の大きさ)以下には縮小されません。
サンプルコード
div { flex-shrink: 1;}
＃
＃
使用例
＃
フレックス・アイテムを縮小しない
.flex-contain {
display: flex;
}
.item-1 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #d396a6; /*■*/
}
.item-2 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #be96d3; /*■*/
}
.item-3 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #27b6d3; /*■*/
}
.item-4 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #96d3c1; /*■*/
}
<div class="flex-contain">
<p class="item-1">
黒猫
</p>
<p class="item-2">
白猫
</p>
<p class="item-3">
三毛猫
</p>
<p class="item-4">
茶トラ猫
</p>
</div>
黒猫
白猫
三毛猫
茶トラ猫
＃
フレックス・アイテムを縮小する
.flex-contain {
display: flex;
}
.item-1 {
flex-shrink: 1;
flex-basis: 200px;
background-color: #d396a6; /*■*/
}
.item-2 {
flex-shrink: 2;
flex-basis: 200px;
background-color: #be96d3; /*■*/
}
.item-3 {
flex-shrink: 3;
flex-basis: 200px;
background-color: #27b6d3; /*■*/
}
.item-4 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #96d3c1; /*■*/
}
<div class="flex-contain">
<p class="item-1">
黒猫
</p>
<p class="item-2">
白猫
</p>
<p class="item-3">
三毛猫
</p>
<p class="item-4">
茶トラ猫
</p>
</div>
黒猫
白猫
三毛猫
茶トラ猫
