CSS3新特性(06):Flex

Flex是Flexible Box的缩写，意为"弹性布局"，Flex布局将会是未来布局的首选方案，因为非常便捷，有必要好好学习下。不过目前浏览器支持不是很好，IE11开始才支持。

网上写的各种Flex的文章都说IE10也支持的，我想说，我像你保证IE10不支持的，至少不支持Flex里面的所有属性，所以既然只有IE11开始的浏览器才支持，那么它的使用就可以缓一缓再说，现在只作为概念类项目的学习之用。

下面就来看一下各家浏览器的支持情况，“+”表示包括且大于的意思，先上图。

Flex里的新鲜概念剖析

Flex是个蛮复杂的布局，在学习之前，先来了解下有关Flex里的新鲜概念。假设我们看到下图的紫色html元素它是弹性布局的，我们就称其为Flex container，意思是弹性的容器。

它有两个直接的子元素，我们称之为Flex item，意思是弹性的元素。

我们把Flex item排列的方向称为main axis，意思是主轴。

而跟主轴垂直的方向，我们把它称为cross axis，意思是辅轴。

这些概念我们在下面会经常使用到，所以先要记住。

那么我们如何设置弹性布局呢，只要display:flex就搞定了，那么Flex item又是什么呢，即设置过display:flex的html元素它在文档流中的子元素就是Flex item了。

判断哪些是有效的Flex item

并不是设置过display:flex的html元素它里面的任何元素都是Flex item。而是它的在文档流中的子元素才是Flex item。两个条件，一是在文档流中，二是子元素。下面我们就来判断下哪些是有效的Flex item？

float元素是在文档流中的子元素，因此算Flex item，absolute绝对定位的元素是脱离文档流的，不能算，至于最后一个是孙元素，也不能算。

弹性布局的特性

接下来我们来讲讲弹性布局的特性，从三个方面来讲，分别是排列方向、弹性、对齐。

排列方向

排列方向有关的属性有这些：flex-direction（弹性的方向）、flex-wrap（弹性的换行）、flex-flow（flex-direction 和 flex-wrap 属性的复合属性）、order（顺序）。下面分别来介绍下。

（1）首先我们来看一下flex-direction（弹性的方向），它的语法如下：

flex-direction:row|row-reverse|column|column-reverse;

flex-direction是设置弹性布局的方向，默认是row。

285.jpg

（2）接下来我们来看一下flex-wrap（弹性的换行），它的语法如下：

flex-wrap:nowrap|wrap|wrap-reverse;

flex-wrap是设置弹性布局的换行，默认是nowrap，即不换行。

（3）接下来我们来看一下flex-flow，它是flex-direction 和 flex-wrap 属性的复合属性，它的语法如下：

flex-flow:flex-direction||flex-wrap;

默认是row nowrap，即横方向排列且不换行。

287.jpg

使用时建议使用复合属性flex-flow，非单独属性flex-direction 和 flex-wrap。

（4）再来看一下order（顺序），默认值为0。它的语法如下：

order:number;

order:1的元素大于order：0的另两个元素，于是顺序就调换了。order的值为整数，可负数。

弹性

弹性有关的属性有这些：flex-basis（设置flex-item的初始宽高）、flex-grow、flex-shrink。下面分别来介绍下。

（1）首先我们来看一下flex-basis（设置flex-item的初始宽高），它也会作为以后设置弹性的基础，它的语法：

flex-basis: number|auto|initial（默认）|inherit;

这里要提一下，如果设置默认值的话，若该弹性元素是横向排列的，即为主轴main axis的宽度，若是纵向排列的，即为辅轴cross axis，也就是高度了。

（2）接下来我们来看一下flex-grow，该属性用于设置弹性盒的能分配到的剩余空间的扩展比率。如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。默认值是0，它的语法：

flex-grow: number;

（3）接下来我们来看一下flex-shrink，它是设置弹性元素的能分配到的剩余空间的收缩比例，默认值是1，它的语法：

flex-shrink: number;

(4)接下来我们来讲讲flex这个复合属性，它的语法：

flex: flex-grow||flex-shrink||flex-basis;

使用时建议使用复合属性flex。

对齐

对齐有关的属性有这些：justify-content(设置主轴方向的对齐方式)、align-items(设置辅轴方向的对齐方式)、align-self、align-content。下面分别来介绍下。

（1）首先我们来看一下justify-content(设置主轴main-axis方向的对齐方式)，它的语法：

justify-content: flex-start|flex-end|center|space-between|space-around;

（2）接下来我们来看一下align-items(设置辅轴cross-axis方向的对齐方式)，它的语法：

align-items: flex-start|flex-end|center|baseline|stretch;

看的清楚么？看不清楚我们再换一张效果图：

（3）接下来我们来看一下align-self（设置单个flex item在cross-axis方向上的对齐方式），它的语法：

align-self: auto|flex-start|flex-end|center|baseline|stretch;

这个跟align-items差不多，所以效果图就不放了。

（4）接下来我们来看一下align-content（设置cross-axis方向上行的对齐方式），它的语法：

align-content: auto|flex-start|flex-end|center|space-between|space-around|stretch;

align-content是当出现多行时，多行如何对齐，可以看到上图有三行，图中显示就是三行的分别对齐方式。

总之：flex弹性布局的基础知识讲完了，以后有空会补充实例篇。

作者：荷小音
链接：https://www.jianshu.com/p/15519b7a9afd