このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

flex-shrink:フレックス・アイテムの縮小CSS3で追加

記事Mar. 23rd,2021
フレキシブルボックスレイアウトでフレックス・コンテナに収まるようにどれだけフレックス・アイテムを縮小するかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 flex-shrink: 1;
適用対象 フレックス・アイテム
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定された値
アニメーション 算出された値による

flex-shrink”プロパティはフレキシブルボックスレイアウトでフレックス・コンテナから主軸方向にフレックス・アイテムがあふれる場合にフレックス・コンテナに収めるためにどれだけそのフレックス・アイテムを縮小するかを指定するプロパティです。

フレックス・アイテムの縮小量はフレックス・コンテナ内のそれぞれの“flex-shrink”プロパティの値を比率として配分されます。

フレキシブル・ボックス・レイアウト

min-width”プロパティ、もしくはmin-height”プロパティによって最小寸法が指定されていない場合、フレックス・アイテムはコンテンツを内包できる最小サイズ(許容される箇所ですべて折り返した時にコンテンツを内包できる最小の大きさ)以下には縮小されません。

サンプルコード

div { flex-shrink: 1;}

説明
<number> フレックス・コンテナ内に収まるための縮小量の比率を指定する (“0”以上の値で指定します。)
共通キーワード

フレックス・アイテムの全体の縮小量は“flex-shrink”プロパティの値を比率としてそれぞれのフレックス・アイテムに分配されます。この時、これは大きいフレックス・アイテムが縮小される前に小さいフレックス・アイテムの寸法が“0”になることを防ぐために比率はフレックス・アイテムの初期寸法に乗算されます。

値が“0”の場合にはそのフレックス・アイテムは縮小されません。

仕様書

Level 1
作業草稿(WD)
flex-shrink
定義あり

使用例

フレックス・アイテムを縮小しない

.flex-contain {
display: flex;
}

.item-1 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #f5f5dc; /**/
}

.item-2 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #ccff99; /**/
}

.item-3 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #d8bfd8; /**/
}

.item-4 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #b0E0E6; /**/
}
<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: #f5f5dc; /**/
}

.item-2 {
flex-shrink: 2;
flex-basis: 200px;
background-color: #ccff99; /**/
}

.item-3 {
flex-shrink: 3;
flex-basis: 200px;
background-color: #d8bfd8; /**/
}

.item-4 {
flex-shrink: 0;
flex-basis: 200px;
background-color: #b0E0E6; /**/
}
<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>

黒猫

白猫

三毛猫

茶トラ猫

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク