flex布局常见问题

flex布局常见问题

问题描述

在使用flex布局时，经常会设置 justify-content: space-between ，设置后最后一行样式会变成：

解决办法

最后一行也会向两边对齐，一般情况下，这并不是我们想要的效果，实际上会让元素靠左显示。

我们可以在元素底部添加 <i></i> 元素，来解决此问题，添加的数量为 列数-2，有四列，就添加两个 i 元素。

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <!-- 通过添加元素，并且设置宽度，来解决最后一行显示问题，添加数量为：列数-2 -->
    <i></i>
    <i></i>
</div>

并为 i 元素设置和展示元素一样的宽度

.container > i {
   width: 120px;
}

这样设置后就可以完美解决此问题：