Flex快速上手
Flex之于 CSS3 就如Promise之于 ES6，都解决了开发者的痛点问题，大大提高了生产力。借助Flex，可以轻松实现栅栏布局、水平/垂直居中、自定义排列方向和顺序等等需求。
专注前端与算法的系列干货分享，转载请声明原创： 「微信公众号：心谭博客」| xxoo521.com | GitHub
前端工程师的福音：flex
原来写前端的过程中，得有一大部分的时间是花费在了水平/垂直居中对齐这件事情上，而网上也是一大堆试图解释某一种对齐方法是正确的文章，搞得头昏脑胀。
终于，弹性布局flex来了，现在团队的开发，在布局上都采用了flex，毕竟不要把生命浪费在对齐这件事情上。
容器的属性和常用值
容器可以通过设置display属性为flex / inline-flex（行内 flex）来指定其为 flex 布局。
下面，将记录一下容器的属性和常用值，基本可以囊括大多数应用场景。
属性 | 含义 | 值 | 常用值 |
|---|---|---|---|
flex-direction | 项目排列方向 | row(默认)、row-reverse、column、column-reverse | row / column |
flex-wrap | 项目是否换行 | nowrap(默认)、wrap、wrap-reverse | wrap（允许换行） |
justify-content | 水平对齐方向 | flex-start(默认)、flex-end、center、space-between、space-around | center(水平居中)/ space-around(等间距布局) |
align-items | 垂直对齐方向 | flex-start、flex-end、center、baseline、stretch(默认: 占满整个容器的高度) | center(垂直居中) |
项目的属性和常用值
首先来看下项目元素上常用的 2 个属性，order和flex-grow：
属性 | 含义 | 值 | 常用值 |
|---|---|---|---|
order | 项目本身的排列顺序 | 整数，默认为 0。越小越靠前 | 整数 |
flex-grow | 项目的放大比例 | ≥0 的整数，默认为 0 | 1 |
其中，order很好理解，下面通过一个例子来展示flex-grow属性的妙用：
<html>
<head>
<style>
div {
display: flex;
}
span:nth-child(1) {
flex-grow: 1;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
<span>3span>
div>
body>
html>可以在浏览器中看到，第一个标签由于设置了flex-grow: 1，它自动占据了父容器除了剩下两个标签外的所有空间！
常见应用场景
场景 ①：水平垂直居中
以上面的html结构为例，如果要让
中的元素水平垂直居中，只需要以下样式代码：
div {
display: flex;
justify-content: center;
align-items: center;
}场景 ②：左右两侧布局，其中一侧宽度确定；另一侧宽度占满剩余空间，并且自动响应
我们要做的就是将自动响应的那一侧的元素的flex-grow属性设置为 1 即可。
场景 ③：栅栏布局系统
还是以上面的html结构为例，实现一个将屏幕等分为 12 列，3 个标签分别占据屏幕宽度的：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 的坑
在实现水平垂直居中的过程中，发现了flex布局仅仅影响容器的一级子元素。例如下面这段代码：
<html>
<head>
<style>
.level1 {
display: flex;
align-items: center;
justify-content: center;
}
style>
head>
<body>
<div class="level1">
<div class="level2">
<span>1span>
<span>2span>
<span>3span>
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>1span>
<span>2span>
<span>3span>
div>
div>
body>
html>