HTML DOMのflexGrowプロパティとは？構文と使い方をサンプルコード付きで解説
flexGrowプロパティとは？
HTML DOMのflexGrowプロパティは、フレックスコンテナの中で各要素（フレックスアイテム）が余ったスペースをどの割合で受け取って伸びるかを設定するためのプロパティです。値には単位を付けない数値を指定します。
構文
flexGrowプロパティをJavaScriptから設定する場合は、次のような構文を使用します。
object.style.flexGrow = "number|initial|inherit"
それぞれの値の意味は以下のとおりです。
- number … 他の要素と比べて、その要素がどれだけ伸びるかを示す数値。デフォルト値は0です。
- initial … プロパティの値を初期値（デフォルト値）に戻します。
- inherit … 親要素のプロパティ値を継承します。
flexGrowプロパティのサンプルコード
それでは、flexGrowプロパティを使った実際の例を見てみましょう。下記のコードでは、ボタンをクリックすると、奇数番目のdiv要素が偶数番目の要素の3倍の比率で伸びるように設定されます。
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
border: 3px groove navy;
display: flex;
text-align: center;
line-height: 90px;
}
div div {
box-shadow: inset 0 0 4px indigo;
}
#demo div:nth-of-type(even) {
flex-grow: 1;
background-color: lavender;
}
#demo div:nth-of-type(odd) {
flex-grow: 1;
background-color: thistle;
}
</style>
<script>
function changeFlexGrow() {
for(var i=1;i<6;i+=2)
document.getElementsByTagName("div")[i].style.flexGrow="3";
document.getElementById("Sample").innerHTML="奇数番目のdiv要素が、偶数番目の要素の3倍の比率で伸びるようになりました";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div>DEMO</div>
<div></div>
<div></div>
</div>
<p>下のボタンをクリックすると、上の奇数番目のdiv要素のサイズが変化します</p>
<button onclick="changeFlexGrow()">Flex Grow を変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後の表示は以下のとおりです。
「Flex Grow を変更」ボタンをクリックすると、次のように奇数番目のdiv要素だけが大きく伸びます。
-
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|
-
HTML DOMのjustifyContentプロパティとは?使い方と設定値を徹底解説
HTML DOM justifyContentプロパティとは HTML DOM の justifyContent プロパティは、フレックスコンテナ内のフレックスアイテムが利用可能なスペースをすべて使い切っていない場合に、主軸(横方向)に沿ってアイテムをどのように配置するかを指定するために使用されるプロパティです。JavaScript を使えば、動的にこの配置方法を変更することもできます。 justifyContentプロパティの構文 justifyContent プロパティを設定する際の基本構文は以下の通りです。 object.style.justifyContent = flex-star