前言

在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 有以下这些属性：

按照功能范围可分为容器属性和项目属性。

容器的属性

1、flex-direction

此属性决定容器主轴排列方式，它有以下几个值：

如下图演示：

2、flex-wrap

flex-wrap 当子元素项超出容器时，设置其是否换行，有以下值：

默认如果不设置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

此属性用来设置子元素项目在主轴上的对齐方式，它有以下几个值：

如下图演示的效果：

水平排列时

垂直排列时

5、align-items

此属性和justify-content类似，区别是align-items 是这种子项目元素在交叉轴上的对齐方式，它有以下值：

效果如下：

这里注意，当值为baseline时，是基于文字的基线对齐的。

6、align-content

align-content 属性比较抽象，它只有满足以下条件下才能起作用：

1. 对父元素设置属性display:flex;
2. 并且设置排列方式为水平排列 flex-direction:row;
3. 设置换行，flex-wrap:wrap;

align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体进行对齐。不同取值的效果如下所示：

如下示例：

项目属性

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