CSS开发技巧(四):解决flex多行布局的行间距异常、子元素高度拉伸问题
2024-10-19 16:41:52
在使用flex布局时,若出现换行
,有两种较为特殊
的现象是值得我们研究的:
子元素高度被拉伸
,其实际高度大于它的内容高度。各行子元素之间的行间距过大
,甚至我们根本没有给子元素设置margin。
现在我们将要探究引发这两种现象的原因及解决方案。
一、子元素高度拉伸问题
- 原因:没有明确声明子元素的高度。
- 现象:
子元素高度没有明确声明时,若容器有纵向空余高度,各行子元素将均分空余高度。
- 解决方案:
明确声明各子元素的高度。
- 特别说明:不换行也会均分,与行数无关。
- 案例:(可直接运行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
height: 600px;
width: 800px;
border: 1px solid red;
}
.item{
margin-right: 20px;
margin-bottom: 20px;
width: 200px;
background-color: green;
}
.item-content{
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
</div>
</body>
</html>
在以上案例中,每个.item元素的内容高度由.item-content撑起来,为200px,实际高度却为280px。这是由于我们没有显式声明.item元素的高度,采用flex多行布局并且容器有空余,那么各行子元素将均分容器的剩余高度,可采用给.item设置height为200px来解决该问题
。
二、行间距异常问题
- 原因:没有明确声明各行元素的纵向排列方式。
- 现象:
默认情况下,若容器有纵向空余高度,且子元素高度已显示声明,那么各行将出现额外行间距,且每两行的行间距相等
。 - 解决方案:
设置align-content属性。
- 特别说明:不换行也会均分,与行数无关。
- 案例:(可直接运行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
/* align-content: flex-start; */
height: 600px;
width: 800px;
border: 1px solid red;
}
.item{
margin-right: 20px;
margin-bottom: 20px;
height: 200px;
width: 200px;
background-color: green;
}
.item-content{
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
</div>
</body>
</html>
在以上案例中,我们希望各行的行间距是我们设置的margin-bottom的值20px,那么我们只需给容器设置align-content: flex-start;
即可。这将使得各行紧密排列,剩余空间都到了容器的底部。更多的排列方式可查阅align-content文档。
最新文章
- Xstream解析XML
- git使用简单教程
- 05管理登录名&;服务器固定角色-大话数据库
- ExtJS学习之路第八步:Window组件
- 没办法,还是要补一下js,回调函数(转载)
- HTTP Get请求URL最大长度
- [SQL]select scope_identity()传回插入相同范围之识别资料行中的最后一个识别值
- Cable master(二分题 注意精度)
- overflow:hiddden与绝对定位的应用场景的事例
- mysql二进制
- 跨平台传输中使用base64来保证非ascii码字符串的完整性
- hibernate 配置文件 和一个 id生成类BaseEntity.java 和一个hibernate工具类 HibernatUtils.java
- Html5 Canvas笔记(1)-CanvasAppTemplate代码
- 明星单品tab
- ubuntu14.04安装cuda
- Excle中的使用小技巧
- GCC编译器原理(三)------编译原理三:编译过程(2-2)---编译之语法分析
- 文本内容查找grep、文件查找find、正则匹配
- webpack学习笔记--配置resolve
- java socket之传输实体类对象