css 简单的flexbox后备，只有垂直和水平对齐

Posted 2021-05-13

.flex-fallback { /* this goes on parent of flex-column */
  display: table;
  table-layout: fixed;
  width: 100%;
}

.flex-column {
  display: table-cell;
  display: -webkit-flex;
  display: flex;
  -wekbit-flex-direction: column;
  flex-direction: column;
}

.flex-center {
  vertical-align: middle;
  -webkit-justify-content: center;
  justify-content: center;
}

.flex-end {
  vertical-align: bottom;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.flexbox > *, .flexbox > * {
  flex: 0 0 auto; /* Preventing auto flex  */
}