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

JavaScriptで要素の縮小率（flexShrink）を設定する方法

JavaScriptでフレックスコンテナ内のアイテムが、他のアイテムと比べてどれだけ縮小されるかを設定するには、flexShrinkプロパティを使用します。要素のstyle.flexShrinkに数値を代入することで、動的に縮小率を変更できます。

flexShrinkプロパティとは

flexShrinkは、フレックスボックスレイアウトにおいてコンテナのスペースが不足した場合の、各アイテムの縮小比率を指定するCSSプロパティです。初期値は「1」で、値が大きいほど他のアイテムに比べて大きく縮小されます。「0」を指定すると、そのアイテムはまったく縮小しなくなります。

サンプルコード

以下のコードを実行して、flexShrinkプロパティの動作を確認してみましょう。ボタンをクリックすると、ID「myID」を持つDIV2のflexShrink値が「5」に設定され、他の要素よりも5倍縮小されやすくなります。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        border: 1px solid #000000;
        width: 500px;
        height: 100px;
        display: flex;
      }
      #box div {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 300px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div style="background-color:orange;">DIV1</div>
      <div style="background-color:yellow;" id="myID">DIV2</div>
    </div>
    <p>flexShrinkプロパティを使用</p>
    <button onclick="display()">設定</button>
    <script>
      function display() {
        document.getElementById("myID").style.flexShrink = "5";
      }
    </script>
  </body>
</html>

ポイントまとめ

  • flexShrink：スペースが不足しているときの縮小比率を指定（初期値：1）
  • flexGrow：余ったスペースの分配比率を指定
  • flex-basis：アイテムの基本サイズを指定

これら3つのプロパティを組み合わせることで、柔軟なレスポンシブレイアウトを構築できます。

  1. CSSのflex-shrinkプロパティでフレックスアイテムの縮小率を指定する方法

    CSSのflex-shrinkプロパティは、フレックスコンテナ内のスペースが不足した場合に、各フレックスアイテムを他のアイテムと比較してどれだけ縮小させるかを指定するためのプロパティです。デフォルト値は「1」で、この値が大きいほど、他のアイテムに比べてより多く縮小されます。逆に「0」を指定すると、そのアイテムはまったく縮小されなくなります。flex-shrinkの基本的な使い方以下のコード例では、9つのフレックスアイテムを持つフレックスコンテナを作成しています。このうち「Q4」のアイテムにはflex-shrink: 0を設定しているため、画面幅が狭くなっても他のアイテムが縮小しても、「Q4」だ

  2. CSSのflex-growプロパティでフレックスアイテムの伸び率を設定する方法

    CSSのflex-growプロパティを使用すると、フレックスコンテナ内の余白スペースに対して、各フレックスアイテムがどれだけ拡大するかを設定できます。値は数値で指定し、他のアイテムとの相対的な比率に基づいて余白が分配されます。flex-growの基本的な仕組みflex-growは、1つまたは複数のフレックスアイテムに対して適用できます。デフォルト値は0で、この場合アイテムは余白を吸収せず、指定された幅のまま表示されます。例えば、あるアイテムにflex-grow: 20、他のアイテムにflex-grow: 1を指定すると、そのアイテムは他のアイテムの20倍の割合で余白を取り込み、結果として他のア