文章目录加载中

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实现的栅栏布局优点有两个:

  1. 不再局限于 12 列
  2. 不再需要计算宽度,也不需考虑宽度浮点数带来的误差

经常会看到 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