--- title: flex-shrink slug: Web/CSS/flex-shrink tags: - CSS - CSS Flexible Boxes - CSS Property - CSS フレックスボックス - NeedsContent - Reference - 'recipe:css-property' translation_of: Web/CSS/flex-shrink --- <div>{{CSSRef}}</div> <p><span class="seoSummary"><strong><code>flex-shrink</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは <code>flex-shrink</code> の数値に従って縮小して収まります。</span></p> <p>使用時は <code>flex-shrink</code> は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。</p> <div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> <p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> <h2 id="Syntax" name="Syntax">構文</h2> <pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ flex-shrink: 2; flex-shrink: 0.6; /* グローバル値 */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset; </pre> <p><code>flex-shrink</code> プロパティは単一の <code><a href="#<number>"><number></a></code> で指定します。</p> <h3 id="Values" name="Values">値</h3> <dl> <dt><code id="<number>"><number></code></dt> <dd>{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は 1 です。</dd> </dl> <h2 id="Formal_definition" name="Formal_definition">公式定義</h2> <p>{{cssinfo}}</p> <h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> {{csssyntax}} <h2 id="Examples" name="Examples">例</h2> <h3 id="フレックスアイテムの縮小係数の設定">フレックスアイテムの縮小係数の設定</h3> <h4 id="HTML">HTML</h4> <div id="Live_Sample"> <pre class="brush: html notranslate"><p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p> <p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p> <p>D と E の幅は他より狭くなります。</p> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> </div> </pre> <h4 id="CSS">CSS</h4> <pre class="brush: css notranslate">#content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; } </pre> </div> <h4 id="Result" name="Result">結果</h4> <p>{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}}</p> <h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td> <td>{{Spec2('CSS3 Flexbox')}}</td> <td>初回定義</td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("css.properties.flex-shrink")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li> <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li> </ul>