【前端基础】flex布局中使用`justify-content`后，最后一行的布局问题
flex布局中使用justify-content后，最后一行的布局问题
1、问题
-
想要的结果：
-
使用
justify-content: space-between;后实际结果：
2、解决方法
- 在最后追加
n个span元素。n 的值 = 列数 - 2。 - 设置
span元素的宽度 =flex item的宽度
※ span 换成 i 元素也行。
<!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>