flex-wrap: wrap 之后元素上下间距过大怎么解决？

最新推荐文章于 2023-12-12 18:23:00 发布
最新推荐文章于 2023-12-12 18:23:00 发布
阅读量3.2k 收藏 2
点赞数 5
分类专栏： css 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36206799/article/details/126353943
版权

问题：

flex-wrap: wrap 之后元素上下间距好大，实际上没有设置间距

原因：

当元素设置了flex-wrap:wrap之后会有一个默认属性 align-content: stretch。元素被拉伸以适应容器。

解决方法：

添加：align-content：flex-start; 使元素位于容器的开头。
qinnzheng（郑琴）
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display:flex解决移动端适配上下布局问题
mmdsky的博客
03-01 4282
问题： 上下布局适配不同手机比例，因手机型号不同造成移动端手机屏幕比例各异，原本手机比例在16:9居多，现在出现各种异形屏造成比例越来越大（21:9）,手机的高度变大，显示的内容也就相对较多了，我们H5这边也有对应的适配不同屏幕。 说明： 此代码解决上下布局问题，当宽高比较大时，实现页面滚动；当宽高比较小时，实现上下布局。 （1）21:9的屏幕，宽高比较小，实现两端布局，按键始终固定在屏幕的最下方...
flex实现上下固定中间自适应的三栏布局
weixin_43848807的博客
06-06 591
flex实现上下固定中间自适应的三栏布局
flex-warp换行后之间的间隔调整
weixin_52563146的博客
08-11 1万+
flex-warp换行后之间的间隔调整 没加align-content属性之前的代码是这样的： .branchWorkshop ul{ display: flex; width: 90%; height: 100%; margin:0; padding:0; flex-wrap: wrap; /* ul盒子里面的内容水平居中 */ margin:0 auto; } 效果是这样的： 总结：没加align-content之前，元素在换行之后，剩余空间被所有行平分，各行将会伸展
flex布局时，出现上一行与下一行之间间距大的问题
miracle22222的博客
07-22 5093
最近做项目的时候，使用flex 布局，发现上一行与下一行的间距比较大。具体的代码布局如下所示， <main v-if="tableData.length" class="flex flex-ai-start flex-wrap"> <div v-for="item in tableData" :key="item.id" :ruleData="item" /> <div class="inf
不改变高度的情况下，消除flex-wrap造成的间距
暗透了更能看到星光
12-23 1250
height: calc(100vh - 630rpx); display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; 设置flex-wrap之后,上下两张图片有很大的间距，如下： 因为白色区域高度固定，不可以修改，所以可以设置align-content:flex-start;来消除间距 display: flex; flex-direction: row; justify-conte.
flex布局，换行的元素上下设置间距
最新发布
qq_37635012的博客
12-12 4540
2） 设置需要更改间距的元素（li）的margin-bottom：14px;然后使用结构伪类选择器设置最后的几个元素margin-bottom: 0;1）设置需要更改间距的元素（li）的margin-bottom:14px,然后用父容器（ul）的margin-bottom: -14px;当我们使用弹性盒子布局后，默认元素是没有外边距的，紧挨着样式就有点丑，如果想使换行后，元素的外边距有个距离，可以用如下方法解决。
CSS使用flex换行之后行距变大问题
V_AYA_V的博客
02-01 6904
在css中父元素高度确定，使用flex，设置了换行属性之后，元素自动换行。换行之后每行的间距变大，自动撑满了父元素，见下图： 预想中的效果： 实际效果： 使用flex属性之后，子元素并没有按照预想的排列方式在页面显示，样式代码如下（less） .list{ height: 200px; width: 465px; border: 1px solid #ccc; display: flex; flex-wrap: wrap; box-sizing: .
消除flex-wrap后的间距
vvvon11的博客
02-02 220
问题：flex布局在换行后会默认平分剩余空间而产生间距。
如何在不改变父元素高度的情况下消除flex-wrap: wrap；产生的间距问题（简单实用 图文解说）
weixin_45721912的博客
03-02 1669
1.flex-wrap: wrap;之后 第二行和第一行会产生一个比较大的空白间距，如下图： 代码如下： 1.1 大家可以看到，我的父元素的高是600，这个是flex的一个特性，我的一个卡片的高度是150，换行之后两行卡片会平分600的高度，大家可以看一下卡片的高度加上空白的高度 正好是600，这个时候只要改变高度就会把中间这个空白距离减少如下图： 1.2 大家看到我把高度改到了四百 中间空白间距就变少了，但是这样做对样式改变有点大，如果是对父元素高度没要求的情况下可以使用，但是有要求的话还是尽量不
flex-container:使用Flex
03-27
- **justify-content**：设置沿主轴上的对齐方式，如`flex-start`（默认，左对齐）、`flex-end`（右对齐）、`center`（居中）、`space-between`（两端对齐，子元素间等间距）和`space-around`（子元素周围等间距）。...
CSS-flex-style:CSS中不同样式的Flex样式
03-15
3. `justify-content`: 定义沿主轴如何对齐子元素，可选值有`flex-start`（靠左/上）、`flex-end`（靠右/下）、`center`（居中）、`space-between`（两端对齐，间距相等）、`space-around`（每个元素周围空间相等）...
Taller-CSS-Flex-Grid:现代布局研讨会
04-08
- `flex-wrap`：控制元素是否换行，可选值有nowrap（不换行）、wrap（换行）和wrap-reverse。 - `flex-grow`, `flex-shrink`, `flex-basis`：定义元素的弹性伸缩比例、收缩比例和初始大小。 2. CSS Grid（网格...
flex-layout:基于 Flexbox 的网格布局抽象
05-30
- `align-content`: 当有多行子元素时，控制行在侧轴上的对齐方式，仅在`flex-wrap`为`wrap`或`wrap-reverse`时生效。 2. **子元素属性**： - `flex-grow`: 定义子元素的放大比例，用于决定剩余空间如何分配。 -...
Food-Blog-Template --- Using-Flex-Box：食品博客模板-使用Flex Box
02-18
4. `justify-content`：沿主轴方向调整项目布局，可设置为`flex-start`（左对齐）、`flex-end`（右对齐）、`center`（居中）、`space-between`（两端对齐，项目之间有等间距）、`space-around`（每个项目两侧的间隔...
flex-warp换行后 间隔调整
qq_43393995的博客
06-02 1413
初识前端
消除flex-wrap产生的间距
A_9888的博客
07-10 3849
先看使用flex-wrap: wrap正常出现的效果 案例是在微信小程序中举例的，若用H5网页，把view 和 text换成对应的 div与span标签 //html <view class="box"> <view class="chunk color1"> 用户名 <text> Tomo </text> </view> <view clas
消除flex-wrap之后每个item上下的距离
weixin_30329623的博客
02-15 1694
设置flex-wrap后，每个item上下都会有距离。更改父元素的高度，就可以删除这些距离。 更改后： 转载于:https://www.cnblogs.com/luguankun/p/10386445.html
清云小程序教程十八：flex-wrap以及消除间距
king3062211087的专栏
07-27 5769
原文链接：http://www.0575yun.com/articledetail/id/69.html 本节课我们再来讲讲flex里面一个常用的属性。上节课我们学习了baseline和stretch，这节课我们首先把“align-items”还原成“flex-start"，先不要用“baseline”，还是用“flex-start”来学习一下换行。 目前在我们各个参数下面，这3个元素是...
Flex自动换行调整上下边距
热门推荐
NuoYan3327的博客
08-22 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .a{ /*开启换行时的特性*/ /* 开启弹性模式开启换行时所有items会横向排列并且自适应父级容器 一旦超出范围就会自动根据指定换行顺序进行换行 默认换行顺...
.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、付费专栏及课程。

余额充值