justify-contentでflexアイテムの行揃えをする

justify-contentプロパティで行揃えをする

justify-contentは、flexアイテムの横方向、または縦方向の行揃えを設定するプロパティです。display: flex;を指定して生成したフレックスボックスに、同時に指定することでflexアイテムの配置を調整します。

justify-contentプロパティは、display: flex;を指定した要素、つまりflexコンテナに指定します。

justify-contentプロパティの値とその内容は以下の通りです。

space-betweenを指定した場合とspace-aroundを指定した場合とはよく似た配置となります。両者の違いは、複数あるflexアイテムの内、最初と最後のflexアイテムの配置のされ方にあります。

space-betweenを指定した場合、最初と最後のflexアイテムは、flexコンテナに対して端に寄ります。

一方space-aroundは、最初のflexアイテムの左端と最後のflexアイテムの右端にも、他のflexアイテムと同様の間隔が空きます。

flex-endを値に指定すると、flexアイテムは終端、つまり右端に寄ります。

HTML

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSS
    
ul {
    display: flex;
    justify-content: flex-end;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

flex-startを値に指定すると、flexアイテムは左端に寄った状態になります。

justify-contentプロパティの初期値がこのflex-startです。

HTML

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSS
    
ul {
    display: flex;
    justify-content: flex-start;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

centerを値に指定すると、flexアイテムは中央に寄ります。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSS
    
ul {
    display: flex;
    justify-content: center;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

space-betweenを値に指定すると、各flexアイテムは、等間隔を保って横全体に広がった配置となります。

この時、最初のflexアイテムは左端に、最後のflexアイテムは右端に寄った配置となります。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSS
    
ul {
    display: flex;
    justify-content: space-between;
    background-color: #555;
    color: #fff;
}
    li {
    padding: 0 10px;
}

上のコードの結果が下です。

space-aroundを値に指定すると、space-betweenと同じように各flexアイテムが広がるのですが、最初のflexアイテムの左側と最後のflexアイテムの右側にも、他のflexアイテム同様に間隔が空いた配置となります。

space-around指定は、全てのflexアイテムに対して等間隔ということになります。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSS
    
ul {
    display: flex;
    justify-content: space-around;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。