CSS - flex-shrink

• トップ
• CSSリファレンス
• flex-shrink

概要

属性名	flex-shrink
値	<number>
初期値	1
適用可能要素	フレックスアイテム
継承	継承しない
メディア	visual
アニメーション	可能

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	11	20	21(-webkit) 29	15(-webkit) 17	6.1(-webkit) 9

説明

フレックスアイテムの圧縮係数を指定します。フレックスアイテムの横幅の合計が、フレックスコンテナのコンテンツ領域の幅を超える場合に、圧縮係数に従い、フレックスアイテムの横幅が圧縮されます。数値が大きいほど大きく圧縮されます。flex-direction が column や column-reverse の場合は、高さに対して適用されます。負数を指定することはできません。フレックスボックスについての概要は flex を参照してください。

使用例

例えば、下記の例で、標準の横幅が 1000px のものを 600px 縮めて 400px にしなくてはならない時、各ボックスが縮まる量は 1:2:3、つまり、boxA は 100px、boxB は 200px、boxC は 300px、合計 600px 縮めることになります。

.flexbox {
  display: flex;
  display: -ms-flexbox;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  text-align: center;
  width: 600px;
}
.boxA { flex-shrink: 1; background-color: #fcc; }
.boxB { flex-shrink: 2; background-color: #cfc; }
.boxC { flex-shrink: 3; background-color: #ccf; }

<div class="flexbox">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク

• http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property
• https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink
• http://caniuse.com/#feat=flexbox

---