flex布局中使用justify-content后，最后一行的布局问题
1、问题
-
想要的结果：
-
使用
justify-content: space-between;后实际结果：
2、解决方法
- 在最后追加
n个span元素。n 的值 = 列数 - 2。 - 设置
span元素的宽度 =flex item的宽度
※ span 换成 i 元素也行。
html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.container {
height: 500px;
width: 500px;
background-color: antiquewhite;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 150px;
height: 150px;
background-color: aquamarine;
}
.item1 {
background-color: orange;
}
.item2 {
background-color: red;
}
.item3 {
background-color: blueviolet;
}
.container span {
width: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">box1</div>
<div class="item item2">box2</div>
<div class="item item3">box3</div>
<div class="item item4">box4</div>
<div class="item item4">box5</div>
<div class="item item3">box6</div>
<div class="item item2">box7</div>
<div class="item item1">box8</div>
<!-- 列数- 2 = 追加的span个数 -->
<span></span>
</div>
</body>
</html>