flex布局常用属性

设置flex布局

.box {
		display: flex;
}

flex-direction属性，内部元素排列方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap属性，元素如何换行

.box {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content属性，元素水平方向排列情况

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items属性，元素垂直方向排列情况

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-self属性，单个元素垂直方向排列情况

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

常用小技巧

 //水平居中
 justify-content:center;
 
 //垂直居中
 align-items:center;
 
 //元素等分排列
 flex:1;
 //垂直方向等分排列
 flex-direction:column;
 flex:1;