玩转Flex布局：看完这篇你也是布局高手！

简言

今天来聊聊前端开发中超级实用的Flex布局。不管你是在学前端还是已经工作，这玩意儿真的是布局神器！以前用float和position折腾半天的效果，现在用Flex分分钟搞定。相信我，看完这篇，你的布局功力绝对能提升一个档次！

1 基本概念

简单来说，Flex布局就是个"弹性盒子"。你只需要给父元素设置display: flex，它立马就变成了一个Flex容器，里面的子元素自动变成Flex项目，乖乖按规则排列。

这就像是个智能的收纳盒，你告诉它要怎么摆放里面的东西，它就能自动调整，再也不用担心布局乱糟糟了！

2 Flex容器属性

2.1 flex容器定义

想让一个元素变成Flex容器？简单到爆：

css 复制代码

.container {
  display: flex; /* 块级弹性容器 */
}

或者你想让它像内联元素一样：

arduino 复制代码

.container {
  display: inline-flex; /* 内联弹性容器 */
}

就这么一句代码，立马开启弹性布局模式！

2.2 flex-direction

这个属性决定项目怎么排队：

css 复制代码

.container {
  flex-direction: row; /* 默认：从左到右排 */
  flex-direction: row-reverse; /* 从右到左排 */
  flex-direction: column; /* 从上到下排 */
  flex-direction: column-reverse; /* 从下到上排 */
}

想横着排还是竖着排，全凭你一句话！

2.3 flex-wrap

项目太多挤不下怎么办？让它换行呗：

css 复制代码

.container {
  flex-wrap: nowrap; /* 默认：死也不换行 */
  flex-wrap: wrap; /* 换行，第一行在上面 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下面 */
}

responsive设计必备神器！

2.4 flex-flow

这是上面两个属性的简写：

css 复制代码

.container {
  flex-flow: row wrap; /* 横着排，不够就换行 */
}

懒人必备，一行代码搞定两个设置！

2.5 justify-content

控制项目在主轴上的对齐方式：

css 复制代码

.container {
  justify-content: flex-start; /* 挤在开头 */
  justify-content: flex-end; /* 挤在结尾 */
  justify-content: center; /* 挤在中间 */
  justify-content: space-between; /* 两头贴边，中间均分 */
  justify-content: space-around; /* 每个项目两边都有间隔 */
  justify-content: space-evenly; /* 所有间隔都一样 */
}

分配空间的神器，再也不用手算margin了！

2.6 align-items

控制项目在交叉轴上的对齐方式：

css 复制代码

.container {
  align-items: stretch; /* 默认：拉伸填满 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: center; /* 居中对齐 */
  align-items: baseline; /* 基线对齐 */
}

垂直居中？So easy！再也不用折腾vertical-align了！

2.7 align-content

多行内容时的对齐方式：

css 复制代码

.container {
  align-content: stretch; /* 默认：拉伸填满 */
  align-content: flex-start; /* 多行挤在顶部 */
  align-content: flex-end; /* 多行挤在底部 */
  align-content: center; /* 多行居中 */
  align-content: space-between; /* 第一行顶头，最后一行到底 */
  align-content: space-around; /* 每行上下都有间隔 */
}

只有多行的时候才有效果，单行就别用它了！

3 Flex项目属性

3.1 order

控制项目的排列顺序：

css 复制代码

.item {
  order: 1; /* 数字越大越靠后 */
}

想调整顺序又不想改HTML结构？用它就对了！

3.2 flex-grow

定义项目的放大比例：

css 复制代码

.item {
  flex-grow: 1; /* 有剩余空间时就放大 */
}

默认是0，就是不放大。设置成1就能瓜分剩余空间了！

3.3 flex-shrink

定义项目的缩小比例：

css 复制代码

.item {
  flex-shrink: 1; /* 空间不够时就缩小 */
}

默认是1，空间不够时会自动缩小。设为0就是不缩小！

3.4 flex-basis

定义项目在分配多余空间之前的初始大小：

css 复制代码

.item {
  flex-basis: 100px; /* 初始宽度100px */
  flex-basis: auto; /* 默认：本来多大就多大 */
}

有点像width，但比width更智能！

3.5 flex

上面三个属性的简写：

css 复制代码

.item {
  flex: 0 1 auto; /* 默认值：不放大、可缩小、初始自动 */
  flex: 1; /* 相当于 1 1 0% */
  flex: auto; /* 相当于 1 1 auto */
}

最常用的写法：flex: 1，让项目自动填满空间！

3.6 align-self

允许单个项目有不一样的对齐方式：

css 复制代码

.item {
  align-self: auto; /* 默认：继承align-items */
  align-self: flex-start; /* 我自己要顶部对齐！ */
}

就想某个项目特立独行？用它准没错！

4 兼容性

现在Flex布局的兼容性已经很好了！基本上所有现代浏览器都支持，包括：

Chrome 29+
Firefox 28+
Safari 9+
Edge 12+
iOS Safari 9+
Android Browser 4.4+

当然，如果要兼容IE的话，可能还得准备备用方案。但对于大多数项目来说，放心用吧！

好了，Flex布局的核心知识点都在这儿了！多练习几次，你就能熟练运用这个布局神器了。记住，实践出真知，赶紧打开编辑器试试吧！