行揃えを調整する
justify-contentプロパティを使えば行揃えを変更できる
.flex-left {
display: flex;
justify-content: left;
}
Item1
Item2
Item3
.flex-center {
display: flex;
justify-content: center;
}
Item1
Item2
Item3
.flex-right {
display: flex;
justify-content: right;
}
Item1
Item2
Item3
.flex-around {
display: flex;
justify-content: space-around;
}
Item1
Item2
Item3
.flex-between {
display: flex;
justify-content: space-between;
}
Item1
Item2
Item3
.flex-evenly {
display: flex;
justify-content: space-evenly;
}
Item1
Item2
Item3
margin-right: auto; / margin-left: auto;
1つ目のフレックスアイテムに margin-right: auto; を設定すると、2つ目のフレックスアイテムとの間にスペースが空く
.flex-margin_right {
display: flex;
.item-left {
margin-right: auto;
}
}
.margin-right
Item2
Item3
3つ目のフレックスアイテムに margin-left: auto; を設定すると、2つ目のフレックスアイテムとの間にスペースが空く
.flex-margin_left {
display: flex;
.margin-left {
margin-left: auto;
}
}
Item1
Item2
.margin-left