移动端开发之容器的属性

1. display

决定是否使用flex布局，默认沿主轴方向排列

.box{
	display:flex;/*块元素的宽度为百分百*/
	display:inline-flex/*由里面的内容撑开*/
}

2. flex-direction

决定了主轴的方向

.box{
	flex-direction:row;/*主轴为水平方向，起点在左端*/
	flex-direction:row-reverse;/*主轴为水平方向，起点在右端*/
	flex-direction:column;/*主轴为垂直方向，起点在上端*/
	flex-direction:column-reverse;/*主轴为垂直方向，起点在下端*/
}

3. flex-wrap

默认情况下，项目都排列在一条线上，flex-wrap属性定义，如果一条轴线排不下如何换行

.box{
	flex-wrap:nowrap;/*不换行*/
	flex-wrap:wrap;/*换行,第一行在上方*/
	flex-wrap:wrap-reverse;/*换行,第一行在上方*/
}

4. flex-flow

flex-flow属性是flex-direction和flex-wrap属性的简写形式，默认值为 row nowrap

.box{
	flex-flow:row nowrap;
	flex-flow:row wrap;
	
}

5. justify-content

定义了内容在主轴上的对齐方式

.box{
	dispaly:flex;/*必须要有该布局，以下操作才能生效*/
	justify-content:flex-start;/*左对齐*/
	justify-content:flex-end;/*右对齐*/
	justify-content:center;/*居中*/
	justify-content:space-between;/*两端对齐，项目之间的间隔相等*/
	justify-content:space-around;/*每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍*/
	j
}

6. align-items

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

.box{
	align-items:flex-start;/*交叉轴的起始端对齐*/
	align-items:flex-end;/*交叉轴的末端对齐*/
	align-item:center;/*交叉轴居中对齐*/
	align-item:baseline;/*交叉轴基线对齐*/
	align-item:stretch;/*如果项目没设置高度，或者高度设置成auto，则将占满整个容器的高度*/
}

7. align-content

定义了多跟轴线在交叉轴上的对齐方式，如果项目只有一根轴线，该属性不起作用，与flex-wrap:wrap配套使用

.box{
	flex-wrap:wrap;
	align-content:flex-start;/*整体从顶部开始*/
	align-content:flex-end;/*整体从底部开始*/
	align-content:center;/*与交叉轴的中点对齐*/
	align-content:space-between;/*与交叉轴两端对齐，轴线之间的间隔平均分布*/
	align-content:space-around;/*每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍*/
	align-content:stretch;/*拉伸*/
}