flex布局强制换行（flex-wrap:wrap）之后，去掉最下面一层多余的间隙。

最新推荐文章于 2024-05-24 17:57:30 发布
最新推荐文章于 2024-05-24 17:57:30 发布
阅读量2.8k 收藏 1
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1783118/article/details/127969559
版权

flex布局强制换行（flex-wrap）之后，去掉最底部一层多余的间隙。

下图是我要做的东西，当我用flex布局的时候，给按钮的父级写上了display：flex；height：100%，但是出来的效果最底部有多余的部分，导致看上去两边的长度不一样，
![在这里插入图片描述](https://img-blog.csdnimg.cn/6e31b1c06faa4134b935f9be0ab2b310.png

下图是我没有选中时的样子，最后一层多出的间隙让页面看上去两边的高度是不一样的
在这里插入图片描述

我的解决办法是给按钮的父级添加一行代码：align-content: space-between; 这样它的最后一层间隙就没有啦，
在这里插入图片描述

附言：align-content还有其它取值，详情可以参考阮一峰的讲解

点击此处查看讲解

satuo@
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局换行后元素不足一行怎样均匀分布
qq_31346077的博客
12-07 741
flex布局换行后元素不足一行怎样均匀分布
FlexBox-flex-wrap:柔性包装
03-06
FlexBox-flex-wrap flex-wrap：包装或立即包装或反向包装。 shortHand flex-flow：行换行 La Flexi-Wrap de CSS especifica si los loslos os“ hijos”儿子的义务是永久性的（nowrap）或pueden fluir en variaslí...
【无标题】flex布局: 一行显示固定个数,强制换行且均匀分布
kaissgf的博客
03-05 1228
.usergroup { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; .usergroup-item { border: 1px solid #fff; flex: 1; height: 153px; margin: 0 8px 8px 0; // 间隙为5px width: calc((100% - 24px) / 3)...
[css] flex布局 元素自动换行三列布局
最新发布
weixin_44405693的博客
05-24 781
如图：要实现这种布局方法：方法三。
弹性盒子(flex) 改变主轴和强制换行
alienwareye的博客
11-11 3611
多行侧轴垂直排列 ,中间按照1比1划分。多行侧轴垂直排列 ,中间按照1比2划分。主轴两边靠边,中间自适应。flex默认的主轴是水平方向上的。2.flex(弹性盒子)强制换行。侧轴两边靠边,中间自适应。多行侧轴垂直排列 ,中间对齐。侧轴从最后一个开始排列。侧抽为垂直方向上的y轴.侧轴从第一个开始排列。默认方向值为 row。
CSS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决方案，适用于 Web、Vue、React 等任何前端项目）
王佳斌
04-10 1万+
css flex弹性布局靠左对齐，CSS flex布局最后一行左对齐，CSS 弹性布局/flex布局最后一行左对齐，css中flex布局如何实现水平方向左对齐，css怎么让弹性布局固定一行显示多少个，Flex布局设置一行显示多个，css 弹性布局一行放N个，css flex固定一行几个如显示一行4个多行布局，css弹性布局设置每行显示指定个数，弹性盒子 flex多行布局 底行左边对齐，flex布局优化(两端对齐,从左至右)，CSS用flex布局两端对齐,列不满左对齐，CSS的flex布局justify-c
flex布局的自动换行
qq_44988115的博客
02-27 1353
.hide-area display: flex flex-direction: column flex-wrap: wrap align-content: flex-start
flex布局换行空白间隙之align-content的使用
11-20
一、本文实现的效果图如下：布局右侧使用flex布局，超过3个则换行。 父元素代码如下： .nav-right{ width: 75%; padding: 10px; display: flex; /* 默认是水平的 */ flex-direction: row;/*设置子元素的排列...
解决flex布局space-between最后一行左对齐的方法
11-20
首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-... flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
flex布局-flex-layout-master.zip
01-03
Flex布局，全称为“Flexible Box”，也常被称为 Flexbox，是一种在CSS3中引入的布局模式，用于处理复杂的网页布局问题。它旨在提供一种更加灵活、动态的方式来组织和对齐内容，尤其适用于单列和多列布局，以及响应式...
flex-cheatsheet：:open_book:Flexbox速查表
02-05
- `flex-wrap`：控制元素是否换行（默认nowrap，可设为wrap或wrap-reverse）。 - `justify-content`：沿主轴对齐元素（可设为flex-start、flex-end、center、space-between、space-around）。 - `align-items`：...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex 布局：实现一行固定个数，超出强制换行（流式布局）
艾米栗的代码天地
02-02 1万+
flex 布局基础知识回顾+ 常用应用
如何在不改变父元素高度的情况下消除flex-wrap: wrap；产生的间距问题（简单实用 图文解说）
weixin_45721912的博客
03-02 1614
1.flex-wrap: wrap;之后 第二行和第一行会产生一个比较大的空白间距，如下图： 代码如下： 1.1 大家可以看到，我的父元素的高是600，这个是flex的一个特性，我的一个卡片的高度是150，换行之后两行卡片会平分600的高度，大家可以看一下卡片的高度加上空白的高度 正好是600，这个时候只要改变高度就会把中间这个空白距离减少如下图： 1.2 大家看到我把高度改到了四百 中间空白间距就变少了，但是这样做对样式改变有点大，如果是对父元素高度没要求的情况下可以使用，但是有要求的话还是尽量不
flex去掉panel边框
licoolxue的专栏
10-11 278
设置属性borderStyle="none"
CSS3 flex 布局在 wrap 换行模式下，让中间指定元素换行
卡尔特斯
12-03 3368
在 display: flex; flex-wrap: wrap; 模式下，默认是自动换行，但是有时候需要在指定位置换行。 只需要在换行元素后面，设置一个 div 元素设置样式 width: 100% 即可，就能达到 <br/> 的效果。 <div style="width: 100%; background-color: red;">在 flex 布局中进行了强制换行</div> 放到 flex 布局的元素中即可生效！ ...
解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行
热门推荐
Sfh的博客
07-08 1万+
直接上问题，如图所示: 我们在对父容器设置 flex-wrap:wrap 之后，容器内的容器成员在换行时中间出现了一个空行，这是因为我们忘记对容器设置align-content属性，在我们对外层容器加入align-content：flex-start之后，这个问题就解决了，效果及代码如下所示： .parent { display: flex; align-content: flex-start; flex-wrap: wrap; width: 200px; heig
flex多行两端布局（消除行间距，不满时左对齐）
九日的博客
07-23 2120
当数量不足时，用不显示的元素补足数量，即可完成不满时左对齐 垂直方向设置align-content: flex-start;即可实现换行时无行间距，之后自行设置样式可控制行间距 父元素样式 .swiper-item{ display: flex; align-items: center; justify-content: space-between; flex-flow:row wrap; align-content: flex-start; } <view class="swiper_box"&g
学习记录：flex:wrap换行之后中间有大空隙的解决方法
weixin_44845483的博客
07-26 5493
学习链接 如果在内部项目太多，一行排列不下的情况下，我们就需要设置内部项目排列不下时选择换行。 此属性就是：flex-wrap:wrap 但是换行之后项目会根据整体布局进行调整，导致两行之间的间隙很大，所以我们还需要设置一个属性为align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐） ...
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
07-25
这段 CSS 代码定义了一个名为 `.row` 的类，用于创建一个具有自适应宽度且包裹其子元素的行布局。下面是对这些 CSS 属性的解释： - `display: -ms-flexbox` 和 `display: flex`: 这两个属性用于指定采用弹性盒子布局。 - `-ms-flex-wrap: wrap` 和 `flex-wrap: wrap`: 这两个属性用于指定弹性盒子的子元素是否换行。`wrap` 值表示在容器宽度不足时，子元素会自动换行。 - `margin-right: -15px` 和 `margin-left: -15px`: 这两个属性用于消除行上的负间距，以防止子元素溢出容器边界。通过为行设置负的左右外边距，可以确保子元素在行中正确对齐。 通过这些 CSS 属性的设置，`.row` 类可以创建一个具有自适应宽度、包裹子元素且消除负间距的行布局。你可以将这个类应用于 HTML 元素，如 `<div class="row"></div>`，以使用这些样式。如果需要修改样式，你可以根据需要进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值