HTML DOM の flexDirection プロパティとは?構文と使い方を実例付きで解説
HTML DOM の flexDirection プロパティは、フレックスコンテナ内の子要素(フレックスアイテム)をどの方向に配置するかを設定・取得するためのスタイルプロパティです。CSS の flex-direction プロパティに対応しており、JavaScript から動的にレイアウトの向きを変更したい場合に活用できます。
flexDirection プロパティの構文
flexDirection プロパティを設定する際の基本的な構文は以下のとおりです。
object.style.flexDirection = "row | row-reverse | column | column-reverse | initial | inherit"
指定できる値の一覧
flexDirection プロパティには、以下の値を指定できます。
| 値 | 説明 |
|---|---|
| row | フレックスアイテムを水平方向(左から右)に並べて表示します。デフォルト値です。 |
| row-reverse | フレックスアイテムを水平方向に並べますが、row とは逆の順序(右から左)で表示します。 |
| column | フレックスアイテムを垂直方向(上から下)に並べて表示します。 |
| column-reverse | フレックスアイテムを垂直方向に並べますが、column とは逆の順序(下から上)で表示します。 |
| initial | このプロパティを初期値(row)に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
flexDirection プロパティの使用例
ここでは、ボタンをクリックすると JavaScript によってフレックスの方向が「column-reverse」から「row-reverse」に切り替わるサンプルを紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
box-shadow: 0 0 0 3px #a323c3;
display: flex;
flex-direction: column-reverse;
}
#demo div {
margin: auto;
border: thin solid green;
}
</style>
<script>
function changeFlexDirection() {
document.getElementById("demo").style.flexDirection = "row-reverse";
document.getElementById("Sample").innerHTML = "コンテナ div のフレックス方向が row-reverse に変更されました";
}
</script>
</head>
<body>
<div id="demo">
<div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
</div>
<p>下のボタンをクリックすると、上のコンテナ div のフレックス方向が変更されます</p>
<button onclick="changeFlexDirection()">Change Flex Direction</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後は、フレックスアイテムが「column-reverse」の指定により垂直方向に逆順で並んで表示されます。
続いて、「Change Flex Direction」ボタンをクリックすると、次のように表示が変化します。
ボタンクリック後は flexDirection プロパティが「row-reverse」に変更され、フレックスアイテムが水平方向に逆順で並び直されます。このように、flexDirection プロパティを使えばユーザーの操作に応じて柔軟にレイアウトを切り替えることが可能です。
-
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