CSS プロパティ flex-shrink

CSS プロパティ flex-shrink：フレックスアイテムの縮小比率を制御する

CSS プロパティ flex-shrink：フレックスアイテムの縮小比率を制御する

このページでは、CSS プロパティ `flex-shrink` について詳しく解説します。`flex-shrink` は、親コンテナのスペースが不足した場合に、フレックスアイテムがどれだけ縮小するかを決定します。`flex-shrink` を使用して、柔軟でレスポンシブな Web レイアウトを作成する方法を学びましょう。

flex-shrink とは？

`flex-shrink` プロパティは、親コンテナのスペースが不足した場合に、フレックスアイテムがどれだけ縮小するかを制御します。

  • デフォルト値は `1` で、これはすべてのアイテムがコンテナに合わせて比例的に縮小することを意味します。
  • `flex-shrink: 0;` と設定すると、コンテナのスペースが不足した場合でも、アイテムは縮小しません。

flex-shrink の使い方

`flex-shrink` には、以下の値を設定できます。

値 説明
正の数値 数値が大きいほど、アイテムの縮小比率が大きくなります。
0 アイテムは縮小しません。

コード例

以下は、`flex-shrink` の異なる値の効果を示すコード例です。 


    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flex-shrink の例</title>
        <style>
            .container {
                display: flex;
                width: 300px; /* コンテナの幅を設定 */
                border: 1px solid #ccc;
            }

            .item {
                padding: 10px;
                text-align: center;
            }

            .item-1 {
                background-color: lightblue;
                flex-shrink: 2; /* アイテム 1 の flex-shrink を 2 に設定 */
            }

            .item-2 {
                background-color: lightgreen;
                flex-shrink: 1; /* アイテム 2 の flex-shrink を 1 (デフォルト値) に設定 */
            }

            .item-3 {
                background-color: lightsalmon;
                flex-shrink: 0; /* アイテム 3 の flex-shrink を 0 に設定 */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item-1">アイテム 1</div>
            <div class="item item-2">アイテム 2</div>
            <div class="item item-3">アイテム 3</div>
        </div>
    </body>
    </html>

この例では、3 つのアイテムを持つフレックスコンテナがあります。アイテム 1 の `flex-shrink` は `2`、アイテム 2 は `1`（デフォルト値）、アイテム 3 は `0` に設定されています。ブラウザの幅を狭くしていくと、アイテム 1 はアイテム 2 よりも速く縮小し、アイテム 3 はまったく縮小しません。

flex-shrink の適用例

`flex-shrink` は、以下のような場合に役立ちます。

  • レスポンシブなナビゲーションバーを作成する際に、スペースが不足した場合にメニュー項目を縮小する。
  • 画像ギャラリーをデザインする際に、異なる画面サイズで画像の適切な比率を維持する。
  • フォームレイアウトを構築する際に、入力フィールドの幅をコンテンツに合わせて自動的に調整する。

注意事項

  • `flex-shrink` を使用すると、アイテムの内容がクリッピングされたり、重なって表示されたりする可能性があります。これを回避するには、`min-width` プロパティや `overflow` プロパティと組み合わせて使用することをお勧めします。
  • `flex-shrink` は、主にスペースが不足した場合の処理に使用されます。スペースが十分にある場合でもアイテムを縮小したい場合は、`flex-basis` プロパティまたは `width` プロパティを使用する必要があります。

関連情報

  • <a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink">flex-shrink - CSS | MDN</a>
  • <a href="https://www.w3schools.com/cssref/css3_pr_flex-shrink.asp">CSS flex-shrink プロパティ | w3schools.com</a>

よくある質問

Q1: `flex-shrink` と `flex-grow` の違いは何ですか？

`flex-shrink` はアイテムの縮小比率を制御し、`flex-grow` はアイテムの拡大比率を制御します。`flex-shrink` はコンテナのスペースが不足した場合にのみ適用され、`flex-grow` はコンテナに余分なスペースがある場合にのみ適用されます。

Q2: `flex-shrink` が機能しません。なぜですか？

`flex-shrink` が機能しない一般的な原因は、以下のとおりです。

  • 親要素に `display: flex;` が設定されていない。
  • アイテムに固定の幅が設定されている。
  • `flex-shrink` の値が正しくない。

Q3: `flex-shrink` の詳細については、どこで学ぶことができますか？

`flex-shrink` の詳細については、以下のリソースを参照してください。

  • <a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink">flex-shrink - CSS | MDN</a>
  • <a href="https://www.w3schools.com/cssref/css3_pr_flex-shrink.asp">CSS flex-shrink プロパティ | w3schools.com</a>