盒子模型（三）
坑军之王
240
弹性盒布局是CSS3更新后的一种新的生效属性，该属性可以更好的实现多栏布局。其中CSS3还对弹性盒布局提供了一下配套属性：
|
属性 |
说明 |
|
flex-flow |
作用于弹性盒元素，是一个复合模型，包括flex-direction和flex-wrap |
|
flex-direction |
指定盒内元素的排列方向 |
|
flex-wrap |
指定弹性盒元素内的换行方式 |
|
order |
指定元素的排列顺序 |
|
align-items |
控制弹性盒元素的子元素在指定换行方式的垂直方向上的对齐方式 |
|
align-content |
用于控制弹性盒内元素的指定换行方式的垂直方向上的对齐方式 |
|
justify-contnet |
用于控制排列元素在排列方向上的排列方式 |
flex-flow：这是一个组合元素，其包括flex-direction和flex-wrap两个属性
flex-direction
指定盒内元素的排列方式，主要有以下属性：
row：横向排列（默认）
row-reverse：横向逆向排列
column:纵向排列
column-reverse：纵向逆向排列
flex-wrap
决定元素是否换行，主要属性如下：
nowrap：不换行（默认）
wrap：换行
wrap-reverse：换行但是元素的排列方式颠倒
justify-content
控制元素在排列方向上的排列方式，排列方向由flex-direction决定
flex-start：从排列方向的开头进行排序（默认）
flex-end：从排列方向的末尾开始排序
center：使元素居中
space-between：元素在排列方式上两端对齐，元素之间的距离相等
space-around：整体元素两侧距离相等，元素之间距离为两侧距离两倍
space-evenly：整体元素两侧距离相等，元素之间距离与两侧距离一样
align-items
控制弹性盒元素排列方式垂直方向的排列方式
flex-start：从排列方向的开头进行排序（默认）
flex-end：从排列方向的末尾开始排序
center：使元素居中
baseline：项目第一行文字的基线对齐
strech：如果没有设置高度或者高度为auto，则占据整个元素的高度
align-content的功能和align-items一样，且属性也是一样的，唯一的不同就是align-content在决定元素换行后仍然起效
align-self的功能和align-items一样，且属性一样，唯一的不同是这个属性是设置单个元素的对齐方式