HTML5 & CSS3 リファレンス - flex-shrink プロパティ（ボックス内の子要素の圧縮率）

CSS3: flex-shrink プロパティ - ボックス内の子要素の圧縮率　

■ 概要

項　　目	説　　明
記述形式	セレクタ {flex-shrink: 値 }
値の形式	数値　（圧縮率）
初期値	1
対応ブラウザー	C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素	フレキシブル・コンテナ内の子要素（flex items）
継　　承	しない

■ 解説

flex-shrinkプロパティ は，ボックス内に子要素が入りきらない場合の 子要素の圧縮率（flex shrink factor） を指定します。

子要素の圧縮率 は他の子要素の圧縮率との相対値で，通常，1，2，3，... などの整数値で指定します。　（数値が大きいほど圧縮率が大きくなります。）

ボックスの主軸方向の基準サイズに対して，子要素の flex-basis プロパティで指定した主軸方向初期サイズの和が超過してはみ出す場合，子要素のサイズを圧縮して調整します。　すなわち，超過部分の長さを，ボックス内の子要素の圧縮率の比に分割し，それぞれ，その長さずつ子要素を圧縮します。　従って，子要素の flex-shrink プロパティ和で超過部分の長さを割る と flex-shrink の値が１の子要素の短縮幅 が得られます。　当然ながら，flex-shrink の値が，２の子要素の短縮幅はその倍，２の子要素の短縮幅は３倍，．．．ということになります。

なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語が定義され，用いられておりますので，これらについての知識は必須です。

■ 使用例（ flex-shrink プロパティの利用）

HTMLソース
CSS <head> ～ </head>	<style type="text/css" media="screen, handheld, print, tv" > <!-- .bc1 {background-color: green; } .bc2 {background-color: maroon; } .bc3 {background-color: blue; } .bc4 {background-color: red; } div.fwrapp { margin: 10px; width: 600px; display: flex; flex-flow: row nowrap; background-color: #f0f0f0; } div.fwrapp div { height: 35px; width 100px; color: #ffffff; font-size: 18px; text-align: center; padding-top: 10px; } .fshrink0 { flex-basis: 200px; flex-shrink: 0; } .fshrink1 { flex-basis: 200px; flex-shrink: 1; } .fshrink2 { flex-basis: 200px; flex-shrink: 2; } .fshrink3 { flex-basis: 200px; flex-shrink: 3; } .div1 { flex-basis: 200px; flex-shrink: 0; } .div2 { flex-basis: 167px; flex-shrink: 0; } .div3 { flex-basis: 133px; flex-shrink: 0; } .div4 { flex-basis: 100px; flex-shrink: 0; } --> </style>
HTML <body> ～ </body>	<div class="fwrapp"> <div class="bc1 fshrink0">初期値: 200px</div> <div class="bc2 fshrink0">初期値: 200px</div> <div class="bc3 fshrink0">初期値: 200px</div> <div class="bc4 fshrink0">初期値: 200px</div> </div> <div class="fwrapp"> <div class="bc1 fshrink0">flex-shrink: 0</div> <div class="bc2 fshrink1">flex-shrink: 1</div> <div class="bc3 fshrink2">flex-shrink: 2</div> <div class="bc4 fshrink3">flex-shrink: 3</div> </div> <div class="fwrapp"> <div class="bc1 div1">200px</div> <div class="bc2 div2">167px</div> <div class="bc3 div3">133px</div> <div class="bc4 div4">100px</div> </div>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   .bc1 {background-color: green; }
   .bc2 {background-color: maroon; }
   .bc3 {background-color: blue; }
   .bc4 {background-color: red; }

   div.fwrapp {
      margin: 10px;
      width: 600px;
      display: flex;
      flex-flow: row nowrap;
      background-color: #f0f0f0;
   }
	
   div.fwrapp div {
            height: 35px; width 100px;
            color: #ffffff;
            font-size: 18px;
            text-align: center;
            padding-top: 10px;
   }

   .fshrink0 { flex-basis: 200px; flex-shrink: 0; }
   .fshrink1 { flex-basis: 200px; flex-shrink: 1; }
   .fshrink2 { flex-basis: 200px; flex-shrink: 2; }
   .fshrink3 { flex-basis: 200px; flex-shrink: 3; }

   .div1 { flex-basis: 200px; flex-shrink: 0; }
   .div2 { flex-basis: 167px; flex-shrink: 0; }
   .div3 { flex-basis: 133px; flex-shrink: 0; }
   .div4 { flex-basis: 100px; flex-shrink: 0; }

-->
</style>

HTML
<body> ～ </body>

<div class="fwrapp">
   <div class="bc1 fshrink0">初期値: 200px</div>
   <div class="bc2 fshrink0">初期値: 200px</div>
   <div class="bc3 fshrink0">初期値: 200px</div>
   <div class="bc4 fshrink0">初期値: 200px</div>
</div>
<div class="fwrapp">
   <div class="bc1 fshrink0">flex-shrink: 0</div>
   <div class="bc2 fshrink1">flex-shrink: 1</div>
   <div class="bc3 fshrink2">flex-shrink: 2</div>
   <div class="bc4 fshrink3">flex-shrink: 3</div>
</div>
<div class="fwrapp">
   <div class="bc1 div1">200px</div>
   <div class="bc2 div2">167px</div>
   <div class="bc3 div3">133px</div>
   <div class="bc4 div4">100px</div>
</div>

ブラウザー表示例　（スケールは表示されません。）
初期値: 200px 初期値: 200px 初期値: 200px 初期値: 200px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px flex-shrink: 0 flex-shrink: 1 flex-shrink: 2 flex-shrink: 3 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 200px 167px 133px 100px

上の例では，"fwrapp"クラスの <div>要素では，"width: 600px;" が指定されています。また，これに含まれる fshrink0クラス～ fshrink3クラスの４つの要素の初期サイズの合計は，200px ×4 = 800px ですので，200px の超過部分ができます（１番目の "fwrapp"クラスの要素の表示を参照）。

この超過部分 200px について，fshrink0クラス～ fshrink3クラスの圧縮率（flex-shrink プロパティの値）は，それぞれ，0, 1, 2, 3 となっていますので，超過した 200px を 0:1:2:3 の割合で fshrink0クラス～ fshrink3クラスに割り当てて圧縮して，合計 200px の短縮を行います。　fshrink1クラス要素の短縮幅を x [px] としますと，0x + x + 2x + 3x = 6x = 200 [px] から，x = 100/3 = 33.33... [px] となります。　したがって，fshrink0クラス～ fshrink3クラスの短縮後の長さは，順に，200 [px], 200 - x = 166.66... [px], 200 - 2x = 133.33... [px], 200 - 3x = 100 [px] と計算できます。　当然ながら，短縮幅 は整数にする必要がありますので，166.66... → 167px，133.33... → 133px になります。（３番目の "fwrapp"クラスの要素の表示を参照）

flex プロパティの使用例とその解説も参考にしてください。

■ 備考

【参考ページ】