/* 开启flex布局 */
.ub {
  display: flex;
  position: relative;
  flex-shrink: 0;
}

/* ***************容器*************** */
/* 改变轴向：纵轴、横轴、轴反转 */
.ub-ver {
  flex-direction: column;
}
.ub-h {
  flex-direction: row;
}
.ub-ver-rev {
  flex-direction: column-reverse;
}
.ub-h-rev {
  flex-direction: row-reverse;
}

/* 项目换行：换行、不换行、换行反转 */
.ub-wrap {
  flex-wrap: wrap;
}
.ub-nowrap {
  flex-wrap: nowrap;
}
.ub-wrap-rev {
  flex-wrap: wrap-reverse;
}

/* 项目主轴对齐方式：居中、左对齐、右对齐、贴边、环绕 */
.ub-pc {
  justify-content: center;
}
.ub-ps {
  justify-content: flex-start;
}
.ub-pe {
  justify-content: flex-end;
}
.ub-pb {
  justify-content: space-between;
}
.ub-pa {
  justify-content: space-around;
}

/* 项目在交叉轴上如何对齐 */
.ub-ac {
  align-items: center;
}
.ub-as {
  align-items: flex-start;
}
.ub-ae {
  align-items: flex-end;
}

/* ***************项目*************** */
/* 子元素 项目缩小比例：0不缩小，宽度可控、1缩小，宽度不可控 */
.ub-shrink0 {
  flex-shrink: 0;
}
.ub-shrink1 {
  flex-shrink: 1;
}

/* 项目的放大比例 */
.ub-grow0 {
  flex-grow: 0;
}

.ub-f1 {
  flex: 1;
}