flex布局详解（配图-简洁易懂）

FlexiableBox即是弹性盒，用来进行弹性布局，一般跟rem（rem伸缩布局（转））连起来用比较方便，flexbox负责处理页面布局，然后rem处理一些flex顾及不到的地方（rem伸缩布局主要处理尺寸的适配问题）。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

注：设为Flex布局后,子元素的float、clear和vertical-align属性将失效

接下来说一下具体使用及各种属性??

一、容器的属性–以下6个属性设置在容器上。

1、flex-direction
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items
6、align-content

一.1、flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;
它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

一.2 flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;
它可能取三个值。

（1）nowrap（默认）：不换行。