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;
}
上のコードの結果が下です。
- ホーム
- 会社概要
- 商品
- 問い合わせ