Flexboxで枠の配置位置ではなく、枠間の余白を設定する方法はこちらの記事を参照してください。
| 値 | 意味 |
|---|---|
| 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>
display:flex; を指定しており、containerクラス内がflexboxの表示となります。
今回の例では5つの枠を準備しています。container クラスの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 が指定されなかった場合のデフォルトの動作です。
.container {
display: flex;
justify-content: space-around;
}
justify-content:space-around; が指定されると、枠は等間隔で表示になります。
後述する space-between との違いは両端の枠とウィンドウ端との間にマージンがとられる動作になる点が異なります。
.container {
display: flex;
justify-content: space-between;
}
justify-content:space-between; が指定されると、枠は等間隔で表示になります。
後述する space-around との違いは両端の枠とウィンドウ端との間にマージンがとられない動作になる点が異なります。
.container {
display: flex;
justify-content: center;
}
justify-content:center; が指定されると、枠は中央の配置で表示になります。
