flex常用布局

/* 
  常用的列布局
 */
.container_column_c_c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container_column_c_e {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.container_column_c_s {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.container_column_c_ev {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.container_column_c_a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.container_column_c_b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.container_column_c_st {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
}

.container_column_e_c {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.container_column_e_e {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.container_column_e_s {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

.container_column_e_ev {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-evenly;
}

.container_column_e_a {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
}

.container_column_e_b {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.container_column_e_st {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: stretch;
}

.container_column_s_c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.container_column_s_e {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.container_column_s_s {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.container_column_s_ev {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}

.container_column_s_a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}

.container_column_s_b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.container_column_s_st {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
}

/* 
  常用的行布局
 */
.container_row_c_c {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.container_row_c_e {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.container_row_c_s {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.container_row_c_ev {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

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

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

.container_row_c_st {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
}

.container_row_e_c {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.container_row_e_e {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}

.container_row_e_s {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}

.container_row_e_ev {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
}

.container_row_e_a {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-around;
}

.container_row_e_b {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.container_row_e_st {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: stretch;
}

.container_row_s_c {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.container_row_s_e {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}

.container_row_s_s {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.container_row_s_ev {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
}

.container_row_s_a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}

.container_row_s_b {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.container_row_s_st {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: stretch;
}