Flex布局将成为未来布局首选方案。本文将详细讲解它的语法以及使用案例

布局的传功听解决方案是以来display属性+position属性+float属性，但是它们能够实现大致平常使用的效果但是，举个例子说吧：在做pc页面还是做app页面时要想使页面水平排列1,2...n列用的最多的是float:left/right或者是：display：inline-block，但是对于一些特殊的布局非常不方便，比如，垂直居中就不容易实现。那么要想清除浮动大家想必清楚：clear:both;

今天呢，就给大家介绍一下不需要float:left/right，display：inline-block一样可以做到浮动。它就是Flex布局。-----Flex布局的好处是啥呢？它能够简便、完整、响应式的实现各种液面布局。

目前，它已经得到所有浏览器的支持，这意味着，现在就能很安全地使用这项功能了。

一．容器的属性[包括以下五个，注意他们都是用于父级元素而且前提下必须要加上display：flex]

1.flex-direction设置元素的排列方向

效果

（1）row

（2）row-reverse

（3）column

（4）column-reverse

2.flex-wrap设置元素的排列方向

效果

（1）norwrap默认不换行，当1....n块很多时会有水平滚动条

（2）wrap

（2）wrap-reverse

3.justify-content 元素在x轴上的排列方式

效果

justify-content：flex-start左对齐

justify-content：flex-end右对齐

justify-content：center居中

justify-content：space-between 两端对齐，项目之间的间隔都相等

justify-content：space- around项目两侧间隔相等

4.align-items定义项目在交叉轴上如何对齐

效果：

5.align-content用于修改flex-wrap属性的行为。类似于align-items，但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

效果：

二．Flex是父元素那么也有子元素

   1.order：元素的排列顺序。数值越小越靠前，默认值为0。

特别提示：当设为flex布局以后，子元素float，clear和vertical属性将失效】

友善工作室   供稿