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

HTML DOMスタイルのflexFlowプロパティの使い方を徹底解説

HTML DOMのスタイルにおけるflexFlowプロパティは、要素のflexDirection（フレックスアイテムの方向）とflexWrap（折り返しの可否）をまとめて指定するためのプロパティです。これら2つのプロパティに対するショートハンド（一括指定）として機能し、記述した順序に従って値が適用されます。

flexFlowプロパティの構文

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

object.style.flexFlow = "flex-direction flex-wrap|initial|inherit";

指定できる値の一覧

flexFlowプロパティに設定できる各値の意味は次の表の通りです。

値説明
flex-directionフレックスアイテムの並ぶ方向を指定します。使用できる値は row、row-reverse、column、column-reverse、initial、inherit です。デフォルト値は row です。
flex-wrapフレックスアイテムを折り返すかどうかを指定します。使用できる値は nowrap、wrap、wrap-reverse、initial、inherit です。デフォルト値は nowrap です。
initialこのプロパティを既定の初期値に戻します。
inherit親要素のプロパティ値を継承します。

flexFlowプロパティの使用例

それでは、実際にflexFlowプロパティを使用したサンプルコードを見てみましょう。この例では、ボタンをクリックするとコンテナのflexFlowが「row-reverse no-wrap」から「row wrap」に動的に変更されます。

<!DOCTYPE html>
<html>
<head>
<style>
    #demo {
        width: 600px;
        height: 190px;
        border: 1px solid black;
        display: flex;
        flex-flow: row-reverse no-wrap;
    }
    #demo div {
        width: 100px;
        height: 100px;
    }
</style>
<script>
    function changeFlexFlow() {
        document.getElementById("demo").style.flexFlow = "row wrap";
        document.getElementById("Sample").innerHTML = "flexFlowプロパティは「row wrap」に設定されました";
    }
</script>
</head>
<body>
    <div id="demo">
        <div><img src="https://www.tutorialspoint.com/images/css.png"></div>
        <div>1</div>
        <div><img src="https://www.tutorialspoint.com/images/Swift.png"></div>
        <div>2</div>
        <div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
        <div>3</div>
        <div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
        <div>4</div>
        <div><img src="https://www.tutorialspoint.com/images/3d.png"></div>
        <div>5</div>
    </div>
    <p>下のボタンをクリックすると、上のコンテナdivのflexFlowプロパティが変更されます</p>
    <button onclick="changeFlexFlow()">Flex Flowを変更する</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

ページを表示すると、初期状態では「row-reverse no-wrap」が適用されているため、アイテムが逆順に一行で表示されます。

HTML DOMスタイルのflexFlowプロパティの使い方を徹底解説

続いて、「Flex Flowを変更する」ボタンをクリックすると、flexFlowが「row wrap」に切り替わり、アイテムが左から右へ並び、コンテナの幅を超えた分は自動的に折り返して表示されます。

HTML DOMスタイルのflexFlowプロパティの使い方を徹底解説

まとめ

flexFlowプロパティを使うことで、JavaScriptからフレックスコンテナの方向と折り返し設定を1行のコードで簡単に制御できます。レスポンシブ対応のレイアウトや動的なUI変更を実装したい場合に非常に便利なプロパティなので、ぜひ活用してみてください。

  1. 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|

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

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