pet-front/style/flex.scss

//水平垂直居中
.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;
}