• 欢迎光临~

flex布局常见问题

开发技术 开发技术 2022-10-04 次浏览

flex布局常见问题

问题描述

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

flex布局常见问题

解决办法

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

我们可以在元素底部添加 <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;
}

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

flex布局常见问题
程序员灯塔
转载请注明原文链接:flex布局常见问题
喜欢 (0)