Flex布局

什么是flex布局

2009年，W3C提出了Flex布局，它可以更简便，完整，响应式地实现各种页面的布局。Flex是Flexible Box的缩写，意思是"弹性布局"。任何一个元素都可以flex布局。注意：设置Flex布局以后，子元素的float，clear，vertical-align属性将失效。Flex是dispaly的属性值，当一个元素的display为felx的时候，它就脱离了盒模型。

.box{display:flex}

flex的基本概念

Flex的核心概念就是容器和轴。容器包括父容器和子容器，所有子元素自动成为容器成员，成为Flex项目，简称“项目”。轴包括主轴和交叉轴。使用Flex布局，首先你要设置父容器。

轴

轴包括主轴和交叉轴。

容器的属性

flex-direction

.box{flex-direction:row|row-reverse|column|column-reverse;}

flex-wrap

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

flex-flow

.box{flex-flow:<flex-direction>||<flex-wrap>;}

justify-content

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

align-items

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

align-content

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}

项目的属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.box{order:<integer>;}

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

.box{flex-grow:<number>;}

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

.box{flex-shrink:<number>;}

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.box{flex-basis:<length>|auto;}

flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.box{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}

algin-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

align-self

.box{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

注意：移动端安卓UC浏览器不支持Flex布局

一个简单的示例

.box{display:flex;  align-items:center;/*垂直居中*/  justify-content: center;/*水平居中*/}

参考文献：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html，http://blog.csdn.net/magneto7/article/details/70854472

（可能写得不够仔细，不够全面，如果有任何意见或者建议给我，我会继续完善它的，希望看到的人能够对你有所帮助）

作者：超爱吃小龙虾
链接：https://www.jianshu.com/p/597f0e2866ae