HTML DOMのflexShrinkプロパティとは？使い方とサンプルコードを解説
HTML DOMのスタイルオブジェクトが持つflexShrinkプロパティは、フレックスコンテナ内において、要素が兄弟要素と比べてどの程度の割合で縮小するかを設定・取得するために使用されます。
フレックスレイアウトでは、コンテナの幅が足りなくなったときに各アイテムが縮まりますが、その縮み具合の比率をこのプロパティで制御できます。
flexShrinkプロパティの構文
flexShrinkプロパティを設定する構文は以下の通りです。
object.style.flexShrink = "number|initial|inherit"
値の説明
- number：他の要素に対して要素がどれだけ縮小するかを数値で指定します。デフォルト値は「0」です。ただし、CSS仕様上は初期値として「1」が定められており、0を指定すると縮小しなくなる点に注意が必要です。
- initial：プロパティの値を初期値（デフォルト値）に戻します。
- inherit：親要素のプロパティ値を継承します。
flexShrinkプロパティの使用例
次のサンプルでは、5つのdiv要素を持つフレックスコンテナを用意し、ボタンをクリックすると4番目のdiv要素のflexShrink値を「3」に変更します。これにより、4番目の要素は他の要素の3倍の割合で縮小されます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
}
#demo {
width: 500px;
height: 30px;
display: flex;
text-align: center;
font-size: 1.2em;
line-height: 30px;
}
#demo div {
flex-basis: 120px;
}
</style>
<script>
function changeFlexShrink() {
document.getElementsByTagName("DIV")[4].style.flexShrink="3";
document.getElementById("Sample").innerHTML="4番目の要素は他の要素の3倍の割合で縮小されました";
}
</script>
</head>
<body>
<div id="demo">
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<div>Fourth Div</div>
<div>Fifth Div</div>
</div>
<br>
<p>下のボタンをクリックすると、上記のdiv要素のうち4番目の縮小率が変更されます</p>
<button onclick="changeFlexShrink()">Change Flex Shrink</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示した直後の状態です。5つのdiv要素が同じ幅（flex-basis: 120px）で並んでいます。
「Change Flex Shrink」ボタンをクリックすると、4番目のdiv要素だけが他の要素の3倍の割合で縮小され、幅が狭くなっていることが確認できます。
まとめ
flexShrinkプロパティを使うことで、JavaScriptから動的にフレックスアイテムの縮小比率を制御できます。画面幅に応じて柔軟なレスポンシブレイアウトを実現したい場合に非常に便利なプロパティなので、flex-growやflex-basisとあわせて覚えておくとよいでしょう。
-
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