弹性盒子

flex布局

介绍

1. 容器默认存在两根轴：横轴和纵轴

2. 采用flex布局的元素，称为flex容器，简称”容器”。它的所有子元素称为flex项目

3. 要设为flex布局，必须先设置display:flex

容器的属性

注意！！important!!
	:)  当将flex-direction设为column值时，align-items作用于横轴，justify-content作用于纵轴

1. flex-direction

:) 规定容器中的项目是按行排列还是按列排列

序号	属性值	说明
1	row	默认值。按行排列，起点在左端
2	row-reverse	按行排列，起点在右端
3	column	按列排列，起点在上端
4	column-reverse	按列排列，起点在下端

2. justify-content

:) 定义了项目在“横轴”上的对齐方式（横轴是相对概念）

序号	取值	说明
1	flex-start	默认值，从左向右依次排列（左对齐，与最左边无空隙）
2	flext-end	右对齐，从右向左一次排列
3	center	居中
4	space-around	每个项目两侧的间隔相等，项目之间也有间隔。项目之间的间隔比两侧的间隔大一倍
5	space-between	两端对齐（左右都不留间隙），项目之间的距离相等

3. align-items

:) 定义了项目在“纵轴”上的对齐方式（纵轴是相对概念）

序号	取值	描述
1	flex-start	从纵轴的最上方起点处排列对齐
2	flex-end	从纵轴的最下方终点处排列对齐
3	center	以纵轴的中心对齐
4	baseline	所有项目的第一行文字的基线对齐
5	stretch	默认值，如果项目未设置高度或者设为auto，每个项目将占满整个容器

4. flex-wrap

:) 规定项目排列是否换行

序号	取值	描述
1	nowrap	默认取值，不换行，所有项目排在一行
2	wrap	换行，第一行在最上方
3	wrap-reverse	换行，第一行在最下方

5. flex-flow：flex-direction flex-wrap

6. aling-content

:) 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。这里的多根轴线代表项目既按横轴排列，又按纵轴排列（即不设置flex-direction）

序号	取值	描述
1	flex-start	与交叉轴的起点对齐
2	flex-end	以交叉轴的终点对齐
3	center	以交叉轴的中心对齐
4	space-between	与交叉轴两端对齐，即距离最底端无距离，轴线之间间隔平均分配
5	space-around	每根轴线两侧的间隔相等（距离最底端有距离），但轴线之间的间隔比轴线与边框的间隔大一倍
6	strech	轴线沾满整个交叉轴，即所有项目将整个纵轴均分

order

order属性定义项目的排列顺序。数值越小，排列越靠前。默认为0。

flex-grow

1. flex-grow属性定义了项目的放大比例。默认为0。即如果存在剩余空间，也不放大。
2. 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
3. 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

文章借鉴于http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html