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

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

HTML DOM justifyContentプロパティとは

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

justifyContentプロパティの構文

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

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

各設定値の説明

justifyContent プロパティに指定できる値とその意味は次の表の通りです。

値説明
flex-startアイテムをコンテナの先頭側に配置します。デフォルト値です。
flex-endアイテムをコンテナの末尾側に配置します。
centerアイテムをコンテナの中央に配置します。
space-betweenアイテム同士の間に均等なスペースを空けて配置します。
space-aroundアイテムの前後およびアイテム間にスペースを空けて配置します。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

justifyContentプロパティの使用例

それでは、実際のコード例を見てみましょう。以下のサンプルでは、ボタンをクリックするとコンテナの justify-content プロパティが「space-between」に動的に変更され、フレックスアイテムの配置が変化します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #demo {
        margin: auto;
        width: 400px;
        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 changeJustifyContent() {
        document.getElementById("demo").style.justifyContent="space-between";
        document.getElementById("Sample").innerHTML="justify-content プロパティが space-between に設定されました";
    }
</script>
</head>
<body>
    <div id="demo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <p>下のボタンをクリックすると、上のコンテナの justify-content プロパティが変更されます</p>
    <button onclick="changeJustifyContent()">Change Justify Content</button>
    <p id="Sample"></p>
</body>

実行結果

ページを開いた直後の初期状態は以下のようになります。

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

ここで「Change Justify Content」ボタンをクリックすると、justify-content プロパティが「space-between」に変更され、アイテム同士の間に均等なスペースが空いて以下のように表示されます。

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

まとめ

justifyContent プロパティを使うことで、JavaScript からフレックスアイテムの主軸方向の配置を柔軟に制御できます。flex-start や center といった基本的な値から、space-between や space-around による均等配置まで、レイアウトの目的に応じて適切な値を選択することが重要です。

  1. HTML DOM の flexDirection プロパティとは?構文と使い方を実例付きで解説

    HTML DOM の flexDirection プロパティは、フレックスコンテナ内の子要素(フレックスアイテム)をどの方向に配置するかを設定・取得するためのスタイルプロパティです。CSS の flex-direction プロパティに対応しており、JavaScript から動的にレイアウトの向きを変更したい場合に活用できます。 flexDirection プロパティの構文 flexDirection プロパティを設定する際の基本的な構文は以下のとおりです。 object.style.flexDirection = row | row-reverse | column | column-rev

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