CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのflex-shrinkプロパティとは？使い方をサンプルコード付きで解説

CSSのflex-shrinkプロパティは、フレックスコンテナ内のスペースが不足した際に、フレックスアイテム（flex item）をどれだけ縮小させるかを指定するためのプロパティです。

デフォルト値は「1」に設定されており、コンテナの幅が足りなくなると、各アイテムは縮小率に応じて自動的に縮まります。「0」を指定すると、そのアイテムは縮小されなくなり、元のサイズが維持されます。

基本構文

flex-shrink: 数値;

数値には0以上の値を指定します。値が大きいほど、スペース不足のときにより大きく縮小されます。

使用例：Q4アイテムの縮小を無効化する

次のコードでは、9つのフレックスアイテムを持つコンテナを作成し、Q4のアイテムにのみflex-shrink: 0を適用しています。ブラウザのウィンドウ幅を狭めてみると、他のアイテムは縮小していきますが、Q4だけは幅100pxのまま維持されることが確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div style = "flex-shrink: 0">Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
         <div>Q9</div>
      </div>
   </body>
</html>

サンプルコードのポイント

  • 親要素にdisplay: flexを指定してフレックスコンテナを作成しています。
  • 各アイテムにはwidth: 100pxを設定しています。
  • Q4のみインラインスタイルでflex-shrink: 0を適用し、縮小を無効化しています。

関連するフレックスボックスのプロパティ

flex-shrinkは、以下のプロパティと組み合わせて使うことで、柔軟なレイアウト制御が可能になります。

  • flex-grow： 余ったスペースをアイテム間でどれだけ分配するかを指定します。
  • flex-basis： アイテムの初期サイズ（基準となる幅）を指定します。
  • flex： 上記3つのプロパティ（flex-grow / flex-shrink / flex-basis）を一括で指定できるショートハンドです。

例えば、特定の要素だけ画面が狭くなっても縮ませたくない場合など、flex-shrinkを活用することでレスポンシブ対応のレイアウトをより精密に設計できます。

  1. CSS子セレクター（>）とは？使い方とサンプルコードで解説

    CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro