頭脳一式 
要素の位置を左、右、中央のように水平方向に指定したい場合はjustify-contentを使用します。
目次
子要素を左揃えにする：justify-content:flex-start
子要素を左揃えにするための大事なポイント
- 親要素に以下を設定する。
display:flex;justify-content:flex-start;
- 子要素には何も設定しない。
See the Pen
justify-start by shiakisudev (@shiakisu)
on CodePen.
CSS
.parent {
height:400px;
width: 400px;
background-color:lime;
display:flex;/* ここは子要素divの位置を決めるための指定*/
justify-content:flex-start;/* 水平方向の指定*/
}
.child {
}
.content{
height:100px;
width: 100px;
border:solid 1px;
background-color:pink;
}
子要素を右揃えにする：justify-content:flex-end
子要素を右揃えにするための大事なポイント
- 親要素に以下を設定する。
display:flex;justify-content:flex-end;
- 子要素には何も設定しない。
See the Pen
flex-end by shiakisudev (@shiakisu)
on CodePen.
CSS
.parent {
height:400px;
width: 400px;
background-color:lime;
display:flex;/* ここは子要素divの位置を決めるための指定*/
justify-content:flex-end;/* 水平方向の指定*/
}
.child {
}
.content{
height:100px;
width: 100px;
border:solid 1px;
background-color:pink;
}
子要素を中央揃えにする：justify-content:center
子要素を中央揃えにするための大事なポイント
- 親要素に以下を設定する。
display:flex;justify-content:center;
- 子要素には何も設定しない。
See the Pen
flex-center by shiakisudev (@shiakisu)
on CodePen.
CSS
.parent {
height:400px;
width: 400px;
background-color:lime;
display:flex;/* ここは子要素divの位置を決めるための指定*/
justify-content:center;/* 水平方向の指定*/
}
.child {
}
.content{
height:100px;
width: 100px;
border:solid 1px;
background-color:pink;
}
子要素を均等割り付けにする：justify-content:space-around
子要素を均等割り付けにするための大事なポイント
- 親要素に以下を設定する。
display:flex;justify-content:space-around;
- 子要素には何も設定しない。
See the Pen
space-around by shiakisudev (@shiakisu)
on CodePen.
CSS
.parent {
height:400px;
width: 400px;
background-color:lime;
display:flex;/* ここは子要素divの位置を決めるための指定*/
justify-content:space-around;/* 水平方向の指定*/
}
.child {
}
.content{
height:100px;
width: 100px;
border:solid 1px;
background-color:pink;
}
最初と最後の要素は両端に。真ん中は均等割り付けに。：justify-content:space-around
大事なポイント
- 親要素に以下を設定する。
display:flex;justify-content:space-between;
- 子要素には何も設定しない。
See the Pen
space-between by shiakisudev (@shiakisu)
on CodePen.
HTML
<div class="parent">
<div class="child">
<div class="content">子要素1</div>
<div class="content">子要素2</div>
<div class="content">子要素3</div>
</div>
<div class="child">
<div class="content">子要素4</div>
<div class="content">子要素5</div>
<div class="content">子要素6</div>
</div>
<div class="child">
<div class="content">子要素7</div>
<div class="content">子要素8</div>
<div class="content">子要素9</div>
</div>
</div>
CSS
.parent {
height:400px;
width: 400px;
background-color:lime;
display:flex;/* ここは子要素divの位置を決めるための指定*/
justify-content:space-around;/* 水平方向の指定*/
}
.child {
}
.content{
height:100px;
width: 100px;
border:solid 1px;
background-color:pink;
}
