.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}
.flex-inner{
  display: inline-flex;
}
.flex-end{
  display: flex;
  justify-content: flex-end;
}

/* // flex row left center */
/* // 横向 左往右；垂直 居中 */
.flex-r-lc {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* // flex column top center */
/* // 垂直 上往下；横向 居中 */
.flex-c-tc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.flex-r-tc{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* // flex column space-between center */
/* // 垂直 上下顶格；横向 左对齐 */
.flex-c-sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-r-sc{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.flex-r-sb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-r-sa {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* // flex column center center */
/* // 垂直 上往下；横向居中 纵向居中 居中 */
.flex-c-cc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-r-cc{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}