解决flex布局space-between最后一行布局问题超简单方法

如果flex布局中justify-content设置为space-between、space-evenly或者space-around

并且最后一行与上面一行个数不同时，布局会裂开

1个container父元素包裹了7个item子元素，1行想设置4个，最后一行的item不到4个，但想靠左

<div class="container"><div class="item item1">1</div><div class="item item1">2</div><div class="item item1">3</div><div class="item item1">4</div><div class="item item1">5</div><div class="item item1">6</div><div class="item item1">7</div>
</div>

        .container {width: 700px;background-color: orange;display: flex;flex-wrap: wrap; //换行justify-content: space-between;}.item {width: 150px;height: 150px;margin-bottom: 10px;background-color: green;}

如果一行想添加的子元素item为n个

那么在最后一行加入（n-2）个span，再给span添加宽度即可

<div class="container"><div class="item item1">1</div><div class="item item1">2</div><div class="item item1">3</div><div class="item item1">4</div><div class="item item1">5</div><div class="item item1">6</div><div class="item item1">7</div><span></span><span></span>
</div>

        .container {width: 700px;background-color: orange;display: flex;flex-wrap: wrap;justify-content: space-between}.item {width: 150px;height: 150px;margin-bottom: 10px;background-color: green;}.container span {width: 150px;}

为什么要设置n-2个span？

拿上面的例子来说，一行需要4个子元素。

只有1个元素的时候，会靠左排列。

有4个元素的时候，就不需要关心这个问题了。

所以去除掉这两种情况。

justify-content:space-between在最后一行只有一个元素的时候，那个元素默认是靠左排布的；如果最后一行拥有与上面行相同的元素数量，最后一行的排布就与上面行的排布相同。上面两种情况不需要添加span元素，于是需要添加span的就剩下了n-2个。

在本文的例子中，最后一行如果是2个item，添加两个span刚好能够补充空位；如果是3个item的话，一个补充在最后一个空位上，另外一个补充在下一行，但是span是没有设置高度的，不会进行展示

解决flex布局space-between最后一行布局问题超简单方法相关推荐

【狼人杀plus全记录】没有公网IP照样完美解决微信小程序本地测试问题，超简单方法！
前文:在开发微信小程序后台的时候,我们需要使用域名进行跳转访问,按照传统的思路我们的域名只能填写一个公网IP,然而多数情况下我们并没有公网IP 方法非常简单,有两种思路: 第一种,将域名定向到局域网I ...
超简单方法-彻底解决网页被劫持-自由锁定主页
你的主页为什么会被劫持的专业分析: http://www.dntk.top/dai-du-ji-huo-gong-ju-gan-ran-jin-60-wan-yong-hu-gu-yi-rao-kai ...
快速解决 PS 2023 插件未经正确签署问题，超简单方便
一步搞定 ! 解决 PS 2023 和AI 2023 插件扩展面板未签署加载显示空白的问题最新版的PS 2023 和AI 2023 发布之后,很多粉丝发现了问题,就是在 PS 2023 版本中运 ...
oracle避免同一sql多次查询,Oracle SQL - 在一个查询中生成一行答案的最简单方法，因此我不必多次运行查询？...
不确定我是否理解正确,但这可能是你想要的.但可能性能欠佳. 12:32:22 HR@vm_xe> l 1 with player(id, dt) as ( 2 select 1, date '2 ...
解决webupload在同一页面实现多个的最简单方法
另外新建一个html页面,用iframe标签引进原页面如:<iframe src="shop_list_upload2.html" width="100%&quo ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left.right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应. 要求:允许增 ...
css 双飞翼布局（flex 、float）和圣杯布局
双飞翼布局双飞翼布局,是一种页面布局的形象的表达.具体表现形式为两边顶宽,中间自适应宽度的三栏布局,中间栏要放在HTML文档流的最前,优先渲染实现方式 float 浮动流页面基本布局很简单,总 ...
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局 1.布局页面导航大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul. css代码块 /* 设置导航样式,定义flex容器 */ ...

解决flex布局space-between最后一行布局问题超简单方法

解决flex布局space-between最后一行布局问题超简单方法相关推荐

最新文章

热门文章