CSS3を勉強したい

CSS3Cascading Style Sheets

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アイテムと同様の間隔が空きます

justify-content: flex-end; で終端に揃える

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;
}

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

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

justify-content: flex-start; で左端に揃える

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;
}

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

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

justify-content: center; で中央に揃える

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;
}

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

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

justify-content: space-between; で等間隔に配置する

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;
}

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

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

justify-content: space-around; で全てが等間隔になる

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;
}

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

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ