Flex Box模型

Flexbox可以为你文档内的元素提供高效的布局、对齐和空间分配方式.

FlexBox初始化

将元素初始化为弹性盒模型非常简单，只需要在父级元素上将display属性设置为flex或者inline-flex即可。

上方div块本身是block元素，垂直排列；声明为flex模型之后，变为flex默认的横向排列。div.container称为 弹性容器, div.list则为其弹性盒子子元素

更改为flex之后的div排列

Flex盒模型容器属性

1）flex-direction弹性伸缩方向

属性值	描述
row	默认值，横轴X自左向右
row-reverse	横轴X自右向左
column	纵轴Y轴自上而下
column-reverse	纵轴Y轴自下而上

效果对比一下

**flex-direction: row;**

**flex-direction: row-reverse;**

**flex-direction: column;**

**flex-direction: column-reverse;**

2）flex-wrap弹性换行

默认没有换行，子元素全部压缩在一行中，而设置wrap属性，则可以控制其换行。

属性值	描述
nowrap	默认值，不换行
wrap	在规定宽度下不能容纳所有元素，则换行
wrap-reverse	反向换行

如container弹性容器有9个子元素，对比效果如下：
不换行的情况下，子元素会被压缩

**flex-wrap: nowrap;**

**flex-wrap: wrap;**

**flex-wrap: wrap-reverse;**

3）flex-flow弹性流

是flex-direction和flex-wrap属性的简写形式，格式为：flex-flow: [flex-direction] [flex-wrap];
如：

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9

每个子元素按纵轴方向排列，在一列不能容纳的情况下换行显示，如图：

**flex-flow:column wrap;**

各个属性之间还有更多的组合形式，多去尝试。

4）justify-content内容对齐

设置子元素的对齐方式。

属性值	描述
flex-start	默认值，在排列方向的起始方向对齐
flex-end	在排列方向的结束方向对齐
center	排列向中心对齐
space-between	每个子元素之间的距离相等
space-around	包围在每个子元素周围的空间大小相等

space-around可能不太好理解，对照着效果图比较一下：

**justify-content: flex-end**

**justify-content: center**

**justify-content: space-between**

**justify-content: space-around**

5）align-items元素对齐

与justify-content区别为前者为横轴基准，后者align-items则以纵轴为基准。其默认值为stretch.

属性值	描述
flex-start	在排列方向的起始方向对齐，纵向起始方向
flex-end	在排列方向的结束方向对齐
center	排列在中心对齐
stretch	默认值，每个子元素扩展到最大高度，填充满纵向空间
baseline	以内容底部为基准线对齐

        
        
这是第1个子元素
        
这是第2个子元素
        
这是第3个子元素

如上三个子元素，当align-items取不同的值时，元素分布：

**align-items: stretch;**

**align-items: flex-start;**

**align-items: flex-end;**

**align-items: center;**

**align-items: baseline;**

对于baseline的理解可能可以这样，其以内容的最底端为基准线来对齐元素。

6）align-content纵向内容对齐

设置在多行子元素的纵向排列, 要先将flex-wrap属性设置为换行wrap。其纵向填充空间，默认为stretch值。

属性值	描述
flex-start	在排列方向的起始方向对齐，纵向起始方向
flex-end	在排列方向的结束方向对齐
center	排列在中心对齐
stretch	默认值，每个子元素扩展到最大高度，填充满纵向空间，每行高度相同

        
        
这是第1个子元素
        
这是第2个子元素
        
这是第3个子元素
        
这是第4个子元素
        
这是第5个子元素
        
这是第6个子元素

当如上六个子元素，随着align-content值得变化如图：

**align-content: stretch;**

**align-content: flex-start;**

**align-content: flex-end;**

**align-content: center;**