CSS使用flex换行之后行距变大问题

在css中父元素高度确定，使用flex，设置了换行属性之后，元素自动换行。换行之后每行的间距变大，自动撑满了父元素，见下图：

预想中的效果：

实际效果：

使用flex属性之后，子元素并没有按照预想的排列方式在页面显示，样式代码如下（less）

.list{height: 200px;width: 465px;border: 1px solid #ccc;display: flex;flex-wrap: wrap;box-sizing: border-box;padding: 20px;.list-item{width: 100px;height: 30px;line-height: 30px;text-align: center;box-sizing: border-box;background:burlywood;margin-right: 5px;margin-bottom: 5px;}}

问题原因：当元素不只一行意味着flex容器在交叉轴上有多行，此时align-content属性生效，align-content默认属性为stretch导致flex容器将交叉轴上的多余空间按行数平均分给每行。处理此问题解决方法也很简单，直接给父元素设置align-content: flex-start即可。

.list{height: 200px;width: 465px;border: 1px solid #ccc;display: flex;flex-wrap: wrap;box-sizing: border-box;padding: 20px;align-content: flex-start;.list-item{width: 100px;height: 30px;line-height: 30px;text-align: center;box-sizing: border-box;background:burlywood;margin-right: 5px;margin-bottom: 5px;}}

最终效果：

笔者这里仅简单给出解决方案，若果想了解详细的设置属性可移步css教程–>
codepen flex-box游乐场

CSS使用flex换行之后行距变大问题相关推荐

2020-08-04 html的js位置 + css的flex实现九宫格 + JS的Array + 软技能的硬编码
2020-08-04 题目来源:http://www.h-camel.com/index.html [html] 一般习惯把js写在</body>前,但有例外的情况吗?说说看 html文件 ...
CSS 之 Flex布局
CSS 之 Flex布局文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题
先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题.这个问题一碰到感觉很麻烦,其实解决方法却很简单. 网页自适应解决iPhone手机横屏字体变大问题网上搜索结 ...
CSS的Flex布局的学习
CSS的Flex布局的学习哔哩哔哩链接:https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒.伸缩盒)是CSS中的又一种布局手段,它主 ...
015day(css控制单词换行的属性，css设置中英文大小写的属性，背景渐变)
一.css控制单词换行的属性 1.word-break自己决定自动换行的处理方法 ①word-break:normal:使用浏览器默认的换行规则.(英文) ②word-break:keep-all:不 ...
flex 换行布局，最后一行不满时问题处理
flex 换行布局,最后一行不满时问题处理如图(借用别人的)所时,flex-wrap: wrap; justify-content: space-between; 时造成的问题: 但是我们期望的是这 ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
div css文字字体行高行距深入理解css行间距设置
div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性. 要使得每行的 ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...

CSS使用flex换行之后行距变大问题

预想中的效果：

实际效果：

最终效果：

CSS使用flex换行之后行距变大问题相关推荐

最新文章

热门文章