【CSS】flexで子要素の間隔を調整する方法

2021年10月12日

「flexで子要素を横並べできたけど少し間隔をあけたい！」

flexで子要素の間隔・余白・空白を調整する方法を解説します。

等間隔　justify-content:space-between

子要素を等間隔にしたいときは「justify-content:space-between」を指定します。

<style>
.example{
    display: flex;
    /*コレ*/justify-content: space-between;
    border: 1px solid #999;
    background: #daf0f2;
}
.example>div{
    border: 1px solid #999;
    padding: 0 10px;
    background: #FFF;
}
</style>
<div class="example">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

justify-contentはflexとセットで使い子要素の横方向の位置調整するCSSです。

justify-content:space-betweenを指定すると子要素の最初と最後を両端に寄せた上で、残りの子要素を等間隔の位置に置きます。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

両端にも余白　justify-content:space-around

子要素を等間隔にし、両端にも余白をつけたいときは「justify-content:space-around」を指定します。

<style>
.example2{
    display: flex;
    /*コレ*/justify-content: space-around;
    border: 1px solid #999;
    background: #daf0f2;
}
.example2>div{
    border: 1px solid #999;
    padding: 0 10px;
    background: #FFF;
}
</style>
<div class="example2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

justify-content:space-aroundは最初と最後の子要素も含め、各子要素の両脇に同じ余白ができます。

各子要素に「margin:auto」が指定されているイメージです。

子要素と子要素の間は2つ分の余白になりますが、最初と最後の子要素と親要素の間は1つ分の余白です。

親要素と子要素の間隔　padding

親要素と子要素の間に余白がほしいときは親要素にpaddingを指定します。

<style>
.example3{
    display: flex;
    /*コレ*/padding: 10px;
    border: 1px solid #999;
    background: #daf0f2;
}
.example3>div{
    border: 1px solid #999;
    padding: 0 10px;
    background: #FFF;
}
</style>
<div class="example3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

flexにもpaddingやmarginは効きます。

子要素同士の間隔　margin

子要素同士の間隔はmarginでも調整できます。

<style>
.example4{
    display: flex;
    padding: 10px;
    border: 1px solid #999;
    background: #daf0f2;
}
.example4>div{
    /*コレ*/margin: 10px;
    border: 1px solid #999;
    padding: 0 10px;
    background: #FFF;
}
</style>
<div class="example4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

justify-contentを使わずにmarignだけで調整することも可能です。

等間隔ではなく、個別に間隔を調整したいときは「:nth-of-type(n)」などを使ってmarginを調整するといいでしょう。

justify-contentとmarginは組み合わせ可能

justify-contentだけでは思ったデザインにならないならpaddingやmarginを追加して調整しましょう。

<style>
.example5{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #999;
    background: #daf0f2;
}
.example5>div{
    margin: 10px;
    border: 1px solid #999;
    padding: 0 10px;
    background: #FFF;
}
</style>
<div class="example5">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>