css中的flex（弹性）布局，并排显示

1、flex-direction
此属性决定主轴的方向

.flex{
	flex-direction: row; // (默认值) 主轴水平方向，从左往右	如图：
	flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左
	flex-direction: column; // 主轴为垂直方向，从上往下
	flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上
} 

 

 

2、flex-wrap
此属性定义，如果一条轴线上排列不下，换行的方式

.flex{
	flex-wrap: nowrap; // （默认）不换行	如图:
	flex-wrap: wrap; // 正常换行 从上到下	如图：
	flex-wrap: wrap-reverse; // 逆方向换行 从下到上	如图：
} 

3、flex-flow
此属性定义，是flex-direction和flex-wrap的方式；

.flex {
	flex-flow: <flex-direction>  空格 <flex-wrap>;
}

 

4、justify-content
此属性定义，项目在主轴上的对齐方式

.flex{
	justify-content: flex-start; // 左对齐（默认）
	justify-content: flex-end;	// 右对齐
	justify-content: center;	// 居中
	justify-content: space-between; // 两端对齐。且项目间间隔相等
	justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍
	justify-content:  space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}

 

 

 

 

转载来自：https://blog.csdn.net/domunweb/article/details/95064383