HTML DOMのflexWrapプロパティとは？使い方とサンプルコードを解説
flexWrapプロパティとは
HTML DOMのflexWrapプロパティは、フレックスコンテナ（flex要素）内のアイテムをどのように折り返して表示するかを指定するために使用されます。JavaScriptを使って動的に折り返しの挙動を変更したい場合に便利です。
flexWrapプロパティを設定する構文は以下のとおりです。
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit";
設定できる値
flexWrapプロパティに指定できる値と、それぞれの意味は以下の表のとおりです。
| 値 | 説明 |
|---|---|
| nowrap | デフォルト値。フレックスアイテムは折り返されず、1行に並べられます。 |
| wrap | 必要に応じてフレックスアイテムが折り返されます。 |
| wrap-reverse | 必要に応じてフレックスアイテムを折り返しますが、行の並びが逆順になります。 |
| initial | プロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
flexWrapプロパティの使用例
以下は、flexWrapプロパティを使った具体的なサンプルコードです。ボタンをクリックすると、フレックスコンテナの折り返し設定が「nowrap」に変更される仕組みになっています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 180px;
height: 120px;
box-shadow: 0 0 0 5px brown;
display: flex;
flex-wrap: wrap;
}
#demo div {
padding: 0;
width: 50px;
height: 50px;
border: 5px solid;
border-radius: 15%;
}
#demo div:nth-child(even) {
border-color: black;
}
#demo div:nth-child(odd) {
border-color: red;
}
</style>
<script>
function changeFlexWrap() {
document.getElementById("demo").style.flexWrap="nowrap";
document.getElementById("Sample").innerHTML="コンテナdivのflex wrapプロパティはno-wrapに設定されました";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>下のボタンをクリックすると、上のコンテナのflex wrapプロパティが変更されます</p>
<button onclick="changeFlexWrap()">Change Flex Wrap</button>
<p id="Sample"></p>
</body>
</html>
実行結果
初期状態では、フレックスアイテムは折り返されて表示されます。
「Change Flex Wrap」ボタンをクリックすると、折り返しが無効化され、アイテムが1行に並ぶように変化します。
このように、flexWrapプロパティを活用することで、画面サイズやコンテンツ量に応じた柔軟なレイアウトをJavaScriptから動的に制御できます。
-
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