You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.6 KiB
81 lines
1.6 KiB
//水平垂直居中
|
|
.flex-rowc {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
//主轴为水平方向，起点在左端，垂直居中
|
|
.flex-rowl {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
//主轴为水平方向，起点在右端，垂直居中
|
|
.flex-rowr {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
//主轴为垂直方向，垂直居中
|
|
.flex-colc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
//主轴为垂直方向，起点在上沿，水平居中
|
|
.flex-colt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
//主轴为垂直方向，起点在下沿，水平居中
|
|
.flex-colb {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.flex-colend-between {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
//主轴为垂直方向，起点在下沿，水平居中
|
|
.flex-col-between {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
//两端对齐，项目之间的间隔都相等
|
|
.flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
// 只保证两端对齐
|
|
.flex-b {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
//每个项目两侧的间隔相等
|
|
.flex-around {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|