flex是CSS3新增的布局方案，可以完美的替代传统布局的解决方案，更加简单，并且可以响应式，我们传统的布局是基于盒状模型，依赖display属性、position属性和float属性，它们实在垂直居中就很不容易，但是使用felx就可以很轻松的完成，布局一直是css中一个非常重要的应用，在任何web网站上都是，所以大家有必要学习下flex，让flex成为我们布局的首选方案。

快速搭建Flex布局

Flexible Box是flex原名，意思是“弹性布局”，任何一个元素都可以设置Flex布局，像块级元素

div{display: flex;}

行级元素也可以：

span{display: flex;}

为了浏览器的兼容性，最好加上浏览器前缀

div{display: flex; display:-webkit-flex;}

Flex基本概念

任何的元素只要设置了Flex属性，就是一个Flex容器（Flex container），而它下面的所有子元素自动变为容器成员，也可以叫做项目（Flex item）。

在下面的图片中有一个flex容器，flex容器默认是存在两根轴：水平主轴和垂直的交叉轴，主轴和交叉轴开始和结束的位置分别叫：main start/main endcross start/cross end
。

项目所占据的主轴和交叉轴空间分别叫main size和cross size

Flex所有属性

1、Flex容器所有属性

flex-direction：决定主轴方向，就是项目排列方向
flex-warp：决定项目是否换行，默认不换
flex-flow：是<code>flex-direction</code>和<code>flex-warp</code>的简写 justify-content：决定项目在主轴上的对齐方式 align-items：决定项目在交叉轴上的对齐方式 align-content：决定多根轴线的对齐方式

2、Flex项目所有属性

order：决定项目的排列顺序，数值越小，越靠前，默认是0
flex-grow：决定项目的放大比例，默认是0
flex-shrink：决定项目的缩小比例，默认是1
flex-basis：决定项目所占据的主轴空间，默认是auto
flex：是<code>flex-grow</code>/<code>flex-shrink</code>和<code>flex-basis</code>的简写，默认是0 1 auto，后两个属性可选 align-self：决定单个项目和其他项目不一样的对齐方式，可覆盖align-items属性，默认是auto