ホーム(記事一覧)へ

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

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

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

flexの基本はこちら↓

等間隔 justify-content:space-between

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

1
2
3
4
5
<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を指定すると子要素の最初と最後を両端に寄せた上で、残りの子要素を等間隔の位置に置きます。

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

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

1
2
3
4
5
<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を指定します。

1
2
3
4
5
<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でも調整できます。

1
2
3
4
5
<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を追加して調整しましょう。

1
2
3
4
5
<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>

【まとめ】flexで間隔を調整する方法

  • 子要素を等間隔にしたいときは「justify-content:space-between」を指定
  • 子要素を等間隔にし、両端にも余白をつけたいときは「justify-content:space-around」を指定
  • 親要素と子要素の間に余白がほしいときは親要素にpaddingを指定
  • 子要素同士の間隔はmarginでも調整可能
  • justify-contentとpadding、marginは組み合わせ可能

以上、flexで子要素の間隔・余白・空白を調整する方法でした。

関連記事