『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。

问题

flex布局，用了flex-wrap:wrap;自动换行属性后，导致两行div中间有空行。(如下图所示)

解决

给外层父元素添加 align-content：flex-start 样式

解决后：

测试代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><style>.out {height:200px;width:500px;border:1px solid black;display:flex;flex-wrap:wrap;align-content:flex-start; //解决问题的样式}.in {height:25%;width:25%;box-sizing:border-box;border:1px solid red;}</style>
</head>
<body><div class="out"><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div></div>
</body>
</html>

知识点：

flex-wrap属性：

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

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

align-content属性：

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

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

参考：
《flex布局》

『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。相关推荐

解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行,下面先说现象. 这是中间有空行的现象导致整个页面看起来很难受 ... 通过加了一个属性 align-content ...
flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行
直接上问题,如图所示: 我们在对父容器设置 flex-wrap:wrap 之后,容器内的容器成员在换行时中间出现了一个空行,这是因为我们忘记对容器设置align-content属性,在我们对外层容器加 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
flex布局 flex全解 flex
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
『解疑』前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）
问题如何友好的通过规范的json数据导出成excel文件. 解题制定规范的json数据结构: ( 只要将现有的数据处理成以下格式即可导出 ) {headerList: [ // 多级表头(2选1即 ...

『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。

问题

解决

『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。相关推荐

最新文章

热门文章