justify-contentについて解説
justify-content とは
justify-content は親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定するプロパティです。
justify-content の指定方法
それでは justify-content の指定方法を見ていきましょう。
justify-content で使える値は下記の5つです。
flex-start（初期値）… 左揃え
flex-end … 右揃え
center … 中央揃え
space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around … 全ての子要素の間隔を均等にあけて配置
それではそれぞれの指定方法と表示を見ていきましょう。
justify-content: flex-start; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.items {
display: flex;
flex-direction: flex-start;
gap: 16px;
}
.item {
width: 20%;
height: 50px;
background-color: #ff0000;
color: #fff;
}上記のように flex-direction: flex-start; を指定すると子要素を左寄せで配置します。
justify-content: flex-end; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.items {
display: flex;
flex-direction: flex-end;
gap: 16px;
}
.item {
width: 20%;
height: 50px;
background-color: #ff0000;
color: #fff;
}上記のように flex-direction: flex-end; を指定すると子要素を右寄せで配置します。
justify-content: center; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.items {
display: flex;
flex-direction: center;
gap: 16px;
}
.item {
width: 20%;
height: 50px;
background-color: #ff0000;
color: #fff;
}上記のように flex-direction: center; を指定すると子要素を中央揃えで配置します。
justify-content: space-between; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.items {
display: flex;
justify-content: space-between;
gap: 16px;
}
.item {
width: 20%;
height: 50px;
background-color: #ff0000;
color: #fff;
}上記のように justify-content: space-between; を指定すると最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置します。
justify-content: space-around; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.items {
display: flex;
justify-content: space-around;
gap: 16px;
}
.item {
width: 20%;
height: 50px;
background-color: #ff0000;
color: #fff;
}上記のように justify-content: space-around; を指定すると全ての子要素の間隔を均等にあけて配置します。
今回のまとめ
この記事では justify-content について解説しました。
justify-content は親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定するプロパティです。
ほとんどのWEBサイトで justify-content は使われている印象なのでぜひ、この記事を見て使いこなしていただけばと思います。
最後までお読みいただきありがとうございます。