文章目录加载中
Flex常用场景和「坑」
# 常见应用场景
场景 ①:水平垂直居中
以上面的html
结构为例,如果要让<div>
中的元素水平垂直居中,只需要以下样式代码:
div {
display: flex;
justify-content: center;
align-items: center;
}
场景 ②:左右两侧布局,其中一侧宽度确定;另一侧宽度占满剩余空间,并且自动响应
我们要做的就是将自动响应的那一侧的元素的flex-grow
属性设置为 1 即可。
场景 ③:栅栏布局系统
还是以上面的html
结构为例,实现一个将屏幕等分为 12 列,3 个<span>
标签分别占据屏幕宽度的:1/6、1/6 和 2/3。
span:nth-child(1) {
flex: 2;
}
span:nth-child(2) {
flex: 2;
}
span:nth-child(3) {
flex: 8;
}
和原来相比,flex
实现的栅栏布局优点有两个:
- 不再局限于 12 列
- 不再需要计算宽度,也不需考虑宽度浮点数带来的误差
经常会看到 flex: 1 1
的写法,其实它是缩写:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
# 必看:flex 的坑
在实现水平垂直居中的过程中,发现了flex
布局仅仅影响容器的一级子元素。例如下面这段代码:
<html>
<head>
<style>
.level1 {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="level1">
<div class="level2">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
</html>
level2 类就不是水平垂直居中的,因为水平垂直居中仅仅影响到了level2
,而不会进一步向下”污染“更深级别的子元素的布局样式。
如果要让 level2 也实现水平垂直居中,我们可以专门封装一个用于水平垂直居中的类,代码如下:
<html>
<head>
<style>
.center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="level1 center">
<div class="level2 center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
</html>
本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog