Flexboxで枠の配置位置ではなく、枠間の余白を設定する方法はこちらの記事を参照してください。
Flexboxで枠間の余白を設定する方法と枠の配置位置を指定する方法を紹介します。
Flexboxでデフォルトの設定で枠を横並びに配置した場合、左詰めになり枠間の余白は無い状態になります。
利用シーンによっては枠を右寄せに配置したり、枠間を均等に配置したい場合などがあります。この記事ではFlexboxで枠の配置位置を設定する方法を紹介します。
Flexboxの枠の配置方法、配置位置を指定するには、justify-content プロパティを利用します。
justify-contentは以下の書式になります。
設定値には下記の値を設定できます。
| 値 | 意味 |
|---|---|
| flex-end | 右寄せ配置、枠間に余白は空かない |
| flex-start | 左寄せ配置、枠間に余白は空かない |
| space-around | 中央配置、枠間に余白がある、左右にも余白あり |
| space-between | 中央配置、枠間に余白がある、左右には余白は空かない |
| center | 中央配置、枠間に余白は空かない |
下記のコードを記述します。
.container {
display: flex;
justify-content:flex-end;
/*justify-content:flex-start;*/
/*justify-content: space-around;*/
/*justify-content: space-between;*/
/*justify-content: center;*/
}
.frameA {
border: 1px solid #e9006b;
}
.frameB {
border: 1px solid #ff6a00;
}
.frameC {
border: 1px solid #d0b106;
}
.frameD {
border: 1px solid #4aae20;
}
.frameE {
border: 1px solid #01b9b3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flexbox-justify-content.css" />
</head>
<body>
<div class="container">
<div class="frameA">1番目のコンテンツ</div>
<div class="frameB">2番目のコンテンツ</div>
<div class="frameC">3番目のコンテンツ</div>
<div class="frameD">4番目のコンテンツ</div>
<div class="frameE">5番目のコンテンツ</div>
</div>
</body>
</html>
container クラスに display:flex; を指定しており、containerクラス内がflexboxの表示となります。
今回の例では5つの枠を準備しています。container クラスのjustify-content 指定により枠の配置がどうなるかを確認します。
justify-contentを指定しない場合は、flex-startの動作になります。
枠は左詰めになり、右側に余白が空きます。
ウィンドウ幅を縮めると、右側の余白部分が縮まります。
さらにウィンドウを狭めると、内部のコンテンツが折り返され、各枠が同じ大きさでウィンドウ幅に合わせて縮まります。
.container {
display: flex;
justify-content:flex-end;
}
justify-content:flex-end; が指定されると、枠は右寄せに配置されます。
ウィンドウ幅を縮めると、左側の余白部分が縮まります。
余白がなくなってからの枠の幅が縮まる動作は、他のオプションを指定した場合の動作と同様になります。
.container {
display: flex;
justify-content:flex-start;
}
justify-content:flex-start; が指定されると、枠は左寄せになります。justify-content が指定されなかった場合のデフォルトの動作です。
ウィンドウ幅を縮めると右側の余白部分が縮まります。
余白がなくなってからの枠の幅の縮小動作は、通常のflexboxの動作と同様です。
.container {
display: flex;
justify-content: space-around;
}
justify-content:space-around; が指定されると、枠は等間隔で表示になります。
後述する space-between との違いは両端の枠とウィンドウ端との間にマージンがとられる動作になる点が異なります。
ウィンドウ幅が広い場合は枠の幅が等間隔で配置されます。
ウィンドウ幅を狭めると、枠の間隔が縮まります。この時ウィンドウの左端と1番目のコンテンツ枠の左端とのマージンも縮まります。
または、ウィンドウ右端と5番目のコンテンツ枠の右側のマージンも縮まります。
枠の間の余白がなくなった後の動作は他のオプション設定の場合と同じです。
.container {
display: flex;
justify-content: space-between;
}
justify-content:space-between; が指定されると、枠は等間隔で表示になります。
後述する space-around との違いは両端の枠とウィンドウ端との間にマージンがとられない動作になる点が異なります。
ページを表示します。下図の画面が表示されます。5つの枠が等間隔で表示されます。
ウィンドウの左端と1番目のコンテンツ枠の左端とのマージン、
ウィンドウ右端と5番目のコンテンツ枠の右側のマージンはページのマージンが反映されるのみで、枠間のマージンは適用されません。
ウィンドウ幅が広い場合は枠の幅が等間隔で配置されます。
ウィンドウ幅を狭めると、枠の間隔が縮まります。この時ウィンドウの両端と両端の枠間とのマージンは変化しません。
枠の間の余白がなくなった後の動作は他のオプション設定の場合と同じです。
.container {
display: flex;
justify-content: center;
}
justify-content:center; が指定されると、枠は中央の配置で表示になります。
ウィンドウ幅を縮めると左右の余白が縮まります。
枠の間の余白がなくなった後の動作は他の設定の場合と同じ動作です。
