Flex 布局

Flex布局是什么？

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

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

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

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

总结: flex 布局 就是给一个盒子开启一个布局功能, 开启后 这个盒子内的所有子盒子

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

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

等等...

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

Flex 布局

原文：https://www.cnblogs.com/jiazhifeng/p/11231374.html