CSS3を勉強したい

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

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

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

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

flex-end

flexアイテムを終端揃えにする。

flex-start

初期値

flexアイテムを左揃えにする。

center

flexアイテムを中央揃えにする。

space-between

flexアイテムを等間隔で配置する。

space-around

space-betweenとは少し違った形で、flexアイテムを等間隔で配置する。

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

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

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

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

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

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

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

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

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

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

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

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

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