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

HTML DOM スタイルのflexプロパティとは？使い方と設定例をわかりやすく解説

HTML DOM スタイルのflexプロパティとは

HTML DOM の flex プロパティは、display プロパティが flex に設定されている要素に対して、柔軟な伸縮サイズを設定または取得するために使用されるプロパティです。このプロパティを利用することで、flexGrow（伸びる比率）、flexShrink（縮む比率）、flexBasis（基本サイズ）の3つのプロパティをまとめて操作できます。

flexプロパティの構文

flexプロパティを設定する場合の基本的な構文は以下の通りです。

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

flexプロパティに指定できる値

値説明
flex-grow指定した数値に基づいて、他のフレックスアイテムと比較してアイテムをどれだけ伸ばすかを決定します。
flex-shrink指定した数値に基づいて、他のフレックスアイテムと比較してアイテムをどれだけ縮めるかを決定します。
flex-basisアイテムの基本となる長さを指定します。有効な長さの単位であれば任意のものを使用できます。
auto3つのflexプロパティを「1 1 auto」に設定します。
initialflexプロパティをデフォルト値である「0 1 auto」に設定します。
none「0 0 auto」と同じ意味になります。
inherit親要素のプロパティ値を継承します。

flexプロパティの使用例

それでは、flexプロパティの具体的な使用例を見ていきましょう。以下のサンプルでは、4つのdiv要素を持つフレックスコンテナを用意し、ボタンをクリックすると1番目と4番目のdiv要素のflex値が「none」に変更される仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      width: 400px;
      height: 80px;
      display: flex;
   }
   #demo div {
      flex: 1 3 auto;
   }
   div:nth-of-type(even){
      box-shadow: inset 0 0 12px red;
   }
   div:nth-of-type(odd){
      box-shadow: inset 0 0 12px blue;
   }
</style>
<script>
   function changeFlex() {
      document.getElementsByTagName("DIV")[1].style.flex="none";
      document.getElementsByTagName("DIV")[4].style.flex="none";
      document.getElementById("Sample").innerHTML="1番目と4番目のdivのflex値がnoneに変更されました";
   }
</script>
</head>
<body>
   <div id="demo">
      <div id="orange"></div>
      <div id="green"></div>
      <div id="blue"></div>
      <div id="red"></div>
   </div>
   <p>下のボタンをクリックすると、上のdiv要素のflexプロパティが変化します</p>
   <button onclick="changeFlex()">Change Flex</button>
   <p id="Sample"></p>
</body>
</html>

実行結果

初期状態では、すべてのdiv要素に「flex: 1 3 auto」が適用され、均等に伸縮した状態で表示されます。

HTML DOM スタイルのflexプロパティとは？使い方と設定例をわかりやすく解説

「Change Flex」ボタンをクリックすると、1番目と4番目のdiv要素のflex値が「none」（0 0 auto）に変更され、これらの要素は伸縮しなくなります。その結果、残りのdiv要素だけがスペースを埋めるように伸びます。

HTML DOM スタイルのflexプロパティとは？使い方と設定例をわかりやすく解説

まとめ

flexプロパティを使うことで、JavaScriptから動的にフレックスアイテムの伸縮挙動を簡単に制御できます。flexGrow、flexShrink、flexBasisを個別に設定する代わりに、1つのflexプロパティだけで一括管理できるため、コードの可読性も向上します。レスポンシブなレイアウトやインタラクティブなUIを実装する際に、ぜひ活用してみてください。

  1. HTML DOM スタイルの flexBasis プロパティとは？使い方とサンプルコードを解説

    flexBasis プロパティとは HTML DOM のスタイルオブジェクトが持つ flexBasis プロパティは、display: flex; が適用された要素（フレックスアイテム）の初期サイズを指定するために使用されます。 重要なポイントとして、flex-basis に「auto」以外の値が設定されている場合、flexBasis プロパティは width プロパティよりも優先されるという仕様があります。フレックスレイアウトでアイテムの幅を制御する際には、この挙動を理解しておくことが大切です。 構文 flexBasis プロパティを JavaScript から設定する場合の基本構文は以下

  2. HTML DOMのjustifyContentプロパティとは?使い方と設定値を徹底解説

    HTML DOM justifyContentプロパティとは HTML DOM の justifyContent プロパティは、フレックスコンテナ内のフレックスアイテムが利用可能なスペースをすべて使い切っていない場合に、主軸(横方向)に沿ってアイテムをどのように配置するかを指定するために使用されるプロパティです。JavaScript を使えば、動的にこの配置方法を変更することもできます。 justifyContentプロパティの構文 justifyContent プロパティを設定する際の基本構文は以下の通りです。 object.style.justifyContent = flex-star