使用flex布局几种常用布局定位

// 横向排列
.flex-row {
display: flex;
flex-direction: row;
}

// 横向排列并居中
.flex-row-center {
display: flex;
flex-direction: row;
justify-content: center;
}

// 横向排列空白环绕
.flex-row-space-around {
display: flex;
flex-direction: row;
justify-content: space-around;
}

// 纵向排列
.flex-column {
display: flex;
flex-direction: column;
}

// 纵向排列并居中
.flex-column-center {
display: flex;
flex-direction: column;
justify-content: center;
}

// 纵向排列两端顶头
.flex-column-space-between {
display: flex;
flex-direction: column;
justify-content: space-between;
}

// 内部元素横纵同时居中对齐
.flex-row-column-center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

简单写了几个，主要是给自己用的，有需要的拿走不谢。