flex布局常用样式

flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

// flex-direction可以改变主轴的方向

//flex布局
.flex{
	display: flex;
}

//水平布局
.flex-center {
  display: flex;
  align-items: center ;  // 项目在交叉轴上如何对齐
  justify-content: center;  // 项目在主轴上的对齐方式
}

.flex-between {
  display: flex;
  align-items: center ;
  justify-content: space-between; //边上没有留缝隙

}

.flex-around {
  display: flex;
  align-items: center ;
  justify-content: space-around; //边上留缝隙了
}

//垂直布局
.flex-column-left {
	display: flex;
	flex-direction: column;
	justify-content: center;  //水平居中
	align-items: flex-start; //左对齐
}

//垂直方向
.flex-column-center {
	display: flex;
	flex-direction: column;
	justify-content: center;  //垂直居中
	align-items: center; //水平居中
}


//从父元素继承align-items的属性
.flex-column-inherit {
	display: flex;
	flex-direction: column;
	justify-content: center;  //垂直居中
	align-items: inherit; //水平居中
}