/* 寮€鍚痜lex甯冨眬 */
.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;
}

/* ***************椤圭洰*************** */
/* 瀛愬厓绱?椤圭洰缂╁皬姣斾緥锛?涓嶇缉灏忥紝瀹藉害鍙帶銆?缂╁皬锛屽搴︿笉鍙帶 */
.ub-shrink0 {
  flex-shrink: 0;
}

.ub-shrink1 {
  flex-shrink: 1;
}

/* 椤圭洰鐨勬斁澶ф瘮渚?*/
.ub-grow0 {
  flex-grow: 0;
}

.ub-f1 {
  flex: 1;
}