简单易懂的Flex布局教程，附送flex-demo源码

Flex，全称为Flexible Box，“弹性布局”之意，用来为盒模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局，在使用webkit内核的浏览器，使用时需加上“-webkit”前缀。

另外，使用Flex布局之后的容器，其子元素的float、clear、vertical-align属性将失效。

采用Flex布局的元素称为"Flex容器"，其子元素称为“Flex项目”。

"Flex容器"默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis) ，主轴开始的位置（即与边框的交叉点）称为main start，结束的位置称为main end；交叉轴开始的位置称为cross start，结束的位置称为cross end。

学习Flex布局，重点是掌握“Flex容器”的6个属性和“Flex项目”的6个属性，基本上就可以游刃有余了。

一、容器的6个属性,设置在容器上

1、flex-direction属性决定项目的排列方向

• 
  

2、flex-wrap属性决定项目是否换行

• 
  

3、flex-flow属性是flex-direction和flex-wrap的简写形式，默认值是 row和nowrap

• 
  

4、justify-content属性定义了项目在主轴上的对齐方式

5、align-items属性定义了项目在交叉轴上的对齐方式

• 
  

6、align-content属性定义了多根轴线与交叉轴的对齐方式，如果只有一根轴线则不起作用

• 
  

二、项目的6个属性,设置在项目上

1、order属性定义项目的排序，数值越小越靠前，默认值是0

• 
  

2、flex-grow属性定义项目的放大比例，默认值为0（即如果存在剩余空间也不放大）

• 
  

3、flex-shrink属性定义项目的缩小比例，默认值为1（即如果空间不足，该项目将缩小）

• 
  

4、flex-basis属性定义了在分配多余空间时，项目占据的主轴空间，默认值是auto,即项目原本的大小

• 
  

5、flex是flex-grow、flex-shrink、flex-basis的缩写形式，默认值为0 1 auto,后两个属性可选

• 
  

6、align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items的属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素，等同于stretch。该属性除了auto外，其余属性与align-items属性完全一致

本文主要参考资料为阮一峰老师的博客。

源码：https://github.com/yisimo/flex-demo