// 横向排列
.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;
}
简单写了几个,主要是给自己用的,有需要的拿走不谢。