在使用Flex布局时仅使用align-items
和justify-content
有时并不能满足我们的需要,通过margin: auto
我们可以实现一些比较有用的布局。
我们先弄一个小demo, 下面的例子都是基于这个demo做修改
<div id="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
#container {
display: flex;
justify-content: flex-end;
background-color: lightyellow;
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75px;
background-color: springgreen;
border: 1px solid #333;
}
1. 不一样的两端对齐
.box1 {
margin-right: auto;
}

.box5 {
margin-left: auto;
}

上面的例子并不限于一个元素
.box2 {
margin-right: auto;
}

2. 不一样的space-between
.box1 {
margin-right: auto;
}
.box5 {
margin-left: auto;
}

3. 不一样的space-around
.box1, .box4 {
margin-left: auto;
}
.box2, .box5 {
margin-right: auto;
}

4. 放置于角落
.box5 {
align-self: flex-end;
margin-left: auto;
}

参考文章: