解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行

直接上问题，如图所示:

我们在对父容器设置 flex-wrap:wrap 之后，容器内的容器成员在换行时中间出现了一个空行，这是因为我们忘记对容器设置align-content属性，在我们对外层容器加入align-content：flex-start之后，这个问题就解决了，效果及代码如下所示：

.parent {display: flex;align-content: flex-start;flex-wrap: wrap;width: 200px;height: 200px;border: 1px solid red;}.chilren {width: 100px;height: 50px;background: blue;}.chilren2 {width: 100px;height: 50px;background: red;}.chilren3{ width: 100px;height: 50px;background:coral;}

<div class="parent"><div class="chilren"></div><div class="chilren2"></div><div class="chilren3"></div>
</div>

总结：

flex-wrap属性：

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行？

flex-wrap:wrap 该样式用于设置换行。

align-content属性：

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐）

关于flex布局的不懂的可以参考阮一峰老师的这篇博客：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行相关推荐

解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行,下面先说现象. 这是中间有空行的现象导致整个页面看起来很难受 ... 通过加了一个属性 align-content ...
『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。
问题 flex布局,用了flex-wrap:wrap;自动换行属性后,导致两行div中间有空行.(如下图所示) 解决给外层父元素添加 align-content:flex-start 样式解决后: ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
Flex布局：Flex布局
1.flex布局与传统布局的区别传统布局: 兼容性好但是布局繁琐局限性,不能再移动端很好的布局 flex布局: 操作方便,布局简单,移动端应用广泛但是IE11或更低版本不支持flex布局使用范 ...
使用flex 布局时，英文不自动换行
问题场景: 在使用 flex 布局时,当内容超出宽度时的换行问题问题描述: flex 布局时,内容超过盒子宽度时,当内容为中文时会自动换行显示,而内容是一串英文字符或者数字时,就不会自动换行显示,如 ...
html flex布局换行,flex布局下换行兼容问题
最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子 .flex-block() ...
html flex布局换行,flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 pre.PNG 具体实现如下: flex布局换行后间隙问题 html,body{ width: 100%; height: 1 ...
weex默认的flex布局_CSS flex布局入门
来源 | https://www.jianshu.com/p/1e40b1d3f20b 一. why flex 都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列.但是项目中尤其是 ...
flex布局（flex 居中）
文章目录什么是flex 基本概念容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content ...

解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行

解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行相关推荐

最新文章

热门文章