前言
在css3 Flex技术出现之前制作网页大多使用浮动（float）、定位（position）以及 显示（display）来布局页面，随着互联网快速发展，移动互联网的到来，已无法满足需求，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
什么是 Flex？
Flex 是 Flexible Box 的缩写，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。
目前，几乎所有的浏览器都支持 Flex 布局，所以flex 是必须要掌握的知识，比float、position更重要。
基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：
你可以通过display: flex (块级)或 display:inline-flex(行内块级)使一个元素变成flex容器，一旦其元素被设置flex容器，其子元素的 float、clear 和 vertical-align 等属性将失效。
flex 有以下这些属性：
属性 | 描述 |
flex-direction | 指定弹性盒子中子元素的排列方向 |
flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
align-items | 设置弹性盒子中元素在交叉轴（纵轴）方向上的对齐方式 |
align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
order | 设置弹性盒子中子元素的排列顺序 |
align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
flex | 设置弹性盒子中的子元素如何分配空间 |
flex-grow | 设置弹性盒子的扩展比率 |
flex-shrink | 设置弹性盒子的收缩比率 |
flex-basis | 设置弹性盒子伸缩基准值 |
按照功能范围可分为容器属性和项目属性。
容器的属性
1、flex-direction
此属性决定容器主轴排列方式，它有以下几个值：
值 | 描述 |
row | 默认值，主轴沿水平方向从左到右 |
row-reverse | 主轴沿水平方向从右到左 |
column | 主轴沿垂直方向从上到下 |
column-reverse | 主轴沿垂直方向从下到上 |
initial | 使用此属性的初始值 |
inherit | 从父元素继承此属性的值 |
如下图演示：
2、flex-wrap
flex-wrap 当子元素项超出容器时，设置其是否换行，有以下值：
值 | 描述 |
nowrap | 默认值，表示项目不会换行 |
wrap | 项目会在需要时换行 |
wrap-reverse | 项目会以相反的顺序换行 |
initial | 设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
默认如果不设置flex-wrap，当子元素在主轴方向总和超过容器大小，则其大小会变小，直到容器没有多余的空间，如下演示：
如图3即使子元素设置了宽度或高度，它仍然被挤压，直到容器没有多余空间，此时就会超出容器显示。当主轴方向是垂直方向时一样。
下面是flex-wrap换行的效果：
当主轴是水平方向时
当主轴是垂直方向时
3、flex-flow
flex-flow 是flex-direction 和 flex-wrap 两个属性的简写，也就是说它可以同时设置这2个属性，语法如下：
flex-flow: flex-direction flex-wrap;如下图示例：
flex-flow: row nowrap
flex-flow: row wrap
flex-flow: column wrap
其它属性依次类推，你可以试试相互组合。
4、justify-content
此属性用来设置子元素项目在主轴上的对齐方式，它有以下几个值：
值 | 描述 |
flex-start | 默认值，在主轴开始位置对齐，水平排列时就是左对齐，垂直排列是上对齐 |
flex-end | 在主轴结束位置对齐，水平排列是右对齐，垂直排列是下对齐 |
center | 水平或垂直居中对齐 |
space-between | 两端对齐，项目之间的间隔是相等的 |
space-around | 每个项目两侧的间隔相等 |
initial | 设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
如下图演示的效果：
水平排列时
垂直排列时
5、align-items
此属性和justify-content类似，区别是align-items 是这种子项目元素在交叉轴上的对齐方式，它有以下值：
值 | 描述 |
stretch | 默认值，项目将被拉伸以适合容器 |
center | 项目位于交叉轴方向的中间位置 |
flex-start | 项目位于交叉轴方向的开始位置 |
flex-end | 项目位于交叉轴方向的结束位置 |
baseline | 项目与容器的文字基线对齐 |
initial | 将设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
效果如下：
这里注意，当值为baseline时，是基于文字的基线对齐的。
6、align-content
align-content 属性比较抽象，它只有满足以下条件下才能起作用：
- 对父元素设置属性display:flex;
- 并且设置排列方式为水平排列 flex-direction:row;
- 设置换行，flex-wrap:wrap;
align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体进行对齐。不同取值的效果如下所示：
值 | 描述 |
stretch | 默认值，将项目拉伸以占据剩余空间，占满整个交叉轴 |
center | 项目交叉轴的中点对齐 |
flex-start | 项目与交叉轴的起点对齐 |
flex-end | 项目交叉轴的终点对齐 |
space-between | 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部 |
space-around | 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等 |
initial | 将设置为属性的默认值 |
inherit | 从父元素继承该属性的值 |
如下示例：
项目属性
1、order
order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义,如下图示例：
子元素项目按照order的值从小到大排序。
2、align-self
align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，align-self 属性和容器的align-items属性一样，它可以覆盖容器的align-items 属性的值。
如下示例：
如图15中c方块的对齐方式覆盖了容器的align-items: center;
3、flex-grow
flex-grow属性定义项目的放大比例，默认为0。
如上图中其它方块默认是flex-grow:0不放大。
如上图方块2占满了剩余的空间，虽然让设置了flex-grow:2；
如上图当所有项目flex-grow:1时，则它们将等分剩余空间（如果有的话），这里即使你设置了其它的数值比如flex-grow:2，flex-grow:10结果都一样等分。
如果其中一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4、flex-shrink
flex-shrink属性和flex-grow相反，它是设置项目缩小比例。默认为1，如果空间不足，该项目将缩小。
如下所图例，当子元素设置flex-shrink:1时，如果空间不足，该项目将等比缩小。
如下图，当子元素设置flex-shrink:1时，但是其中c子项的flex-shrink:0时，在空间不足时c子项保持不变，其它项等比缩小。
同理当c项flex-shrink:2时，在空间不足时c项将比其它项目多缩小2倍，数值不同缩小比例不一样，如下图：
5、flex-basis
flex-basis属性设置项目如何分配主轴上剩余的空间，值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。
flex-basis:auto 时：
flex-basis:100% 时：
flex-basis:100px 时：
- 注意它和width的区别，flex-basis只能在flex容器中使用，但width在任何块级元素都可以。
- 同时设置width，又设置flex-basis，当flex-basis大于自身内容宽度时，不管width是否设置，flex-basis优先级高。
- 当flex-basis和width都小于自身内容宽度时，flex-basis和width哪个值大，宽度就是那个。
- 当flex-basis设置值小于自身内容宽度，而width大于自身宽度时，则宽度为自身内容宽度。
flex属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：
flex: flex-grow flex-shrink flex-basis;如下示例：
最后
关于flex容器，其知识点比较多相对难易理解，它非常灵活，所以要活学活用，多加练习。通常flex会和rem一起使用，实现页面自适应，常见的网页布局比如以下：
关于网页布局，以后会专门介绍，在这里不详细说明了，感谢关注，学习愉快。
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
https://www.runoob.com/w3cnote/flex-grammar.html
http://c.biancheng.net/css3/flex.html
https://www.w3school.com.cn/cssref/pr_flex.asp