Flex布局

Flex布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

Webkit 内核的浏览器，必须加上-webkit前缀。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

 flex 布局 就像是把一个 你要布局的页面 (某个div)  变成了一个 可以填充的空间 就像他的名字一样 弹性布局,确实很贴切 ,之前的 浮动+定位布局可以用很精准来描述, 现在的flex却有点模糊,但确实很好用

总结: flex 布局 就是给一个盒子开启一个布局功能, 开启后(必须先开启给父盒子添加css属性,display:flex) 这个盒子内的所有子盒子

就可以通过给这个父盒子设置css属性来改变布局效果 : 

• justify-content : center　　　(水平方向居中, 左右靠向中心)　
• align-items : center　　　　  (垂直方向居中,上下靠向中心)  (单 列/行 情况)
• align-content : center　　     (垂直方向居中,上下靠向中心)  (多 列/行 情况)
• flex-direction : column  　　  (改变排列方向,并使上面两项的效果交换)
• flex-wrap : wrap　　　　　　 (让你的子盒子可以换行) (ps:当开启flex布局后,父盒子内的所有元素会横向排成一行排列,如果你的盒子宽度有限,那么你的所有子盒子就会默认缩小)
• flex-flow : column || wrap　　(改变排列方向 和 换行 的简写)

还可以给这个父盒子的子盒子设置css属性来辅助改变布局效果 :

• order : 0　　    　　  (默认0,假如有3个子盒子,分别给每个子盒子添加这个属性,谁得值小谁排前面.)(感觉没啥用)
• flex-grow : 0         (默认0,假如有3个子盒子,分别给每个子盒子添加这个属性,如果父盒子宽90px,每个子盒子宽设置为10px(10px,10px,10px),还有60px没有被盒子覆盖,如果有2个盒子的属性都改为1,那么他俩将平分这60px的空间,这三个子盒子的宽度就会变为 10px,40px,40px , 如果3个盒子的属性都改为1,那么他们3平分 这个三盒子就会变为 30px,30px,30px , 如果有一个盒子的属性为2,一个属性为1,一个属性为0(默认的),那么这三个盒子的宽度就会变为如50px,30px,10px 可以演变一个公式 属性值每增加1子盒子宽度增加量 = [总盒子的宽度-所有子盒子的宽度之和]/所有子盒子的属性值之和)
• flex-shrink : 1　　     (默认1,与上面内个正好相反,如果说flex-grow是在空间有空余的时候规定了哪些子盒子可以放大,可以放大多少.那么flex-shrink这个属性就是规定了在不开启换行时,规定了哪些盒子可以缩小,缩小多少,值为0时,代表不缩小)
• flex-basis : auto　　    (默认auto,用处不大,意思就是在子盒子分配多余空间(放大)或者缩小之前,这个子盒子原本的宽度,根width一样)    
• flex : auto / none     (默认值 0 1 auto,flex-grow,flex-shrink,flex-basis的简写.值 auto==> 1 1 auto, 意思就是有多余空间,需要分摊多余空间的时候这个子盒子占1份,需要缩小宽度的时候,这个盒子也缩小1份,这个盒子的宽度是本来大小.值 none ==> 0 0 auto ,意思就是,你有多余空间,我不放大.你空间不够了,我也不缩小,我就是本来大小谁也影响不了我的大小)
• align-self : auto      (默认值 auto , 添加了这个属性,就意味着这个子盒子要比其他子盒子突出,这个子盒子就可以单独设置它自己的对齐方式)

ps: 属性还有其他的就不列举了,属性值有很多种,总的来说flex还是很好用的,以前不会flex的时候 都是用定位,浮动,maring 等等来布局,现在除了一些必须要定位的元素,其他的都用flex布局了,当然了,对于一些简单的页面不用也是可以的.http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 这个是阮一峰大神的 [flex布局教程:语法篇].