关于flex布局的常规class样式

/* 语法兼容 */     

.flex-container {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

      }



      .direction-row {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

      }



      .direction-row-reverse {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: reverse;

        -ms-flex-direction: row-reverse;

        flex-direction: row-reverse;

      }



      .direction-column {

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

      }



      .direction-column-reverse {

        -webkit-box-orient: vertical;

        -webkit-box-direction: reverse;

        -ms-flex-direction: column-reverse;

        flex-direction: column-reverse;

      }



      .flex-wrap {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

      }



      .flex-1 {

        -webkit-box-flex: 1;

        -ms-flex: 1;

        flex: 1;

      }



      .flex-shrink {

        -ms-flex-negative: 0;

        flex-shrink: 0;

      }



      .flex-start {

        -webkit-box-pack: start;

        -ms-flex-pack: start;

        justify-content: flex-start;

      }



      .flex-center {

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

      }



      .flex-end {

        -webkit-box-pack: end;

        -ms-flex-pack: end;

        justify-content: flex-end;

      }



      .flex-space-between {

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

      }



      .flex-space-around {

        -ms-flex-pack: distribute;

        justify-content: space-around;

      }



      .align-items-start {

        -webkit-box-align: start;

        -ms-flex-align: start;

        align-items: flex-start;

      }



      .align-items-end {

        -webkit-box-align: end;

        -ms-flex-align: end;

        align-items: flex-end;

      }



      .align-items-center {

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

      }



      .align-items-baseline {

        -webkit-box-align: baseline;

        -ms-flex-align: baseline;

        align-items: baseline;

      }



      .align-items-stretch {

        -webkit-box-align: stretch;

        -ms-flex-align: stretch;

        align-items: stretch;

      }



      .align-self-start {

        -ms-flex-item-align: start;

        align-self: flex-start;

      }



      .align-self-end {

        -ms-flex-item-align: end;

        align-self: flex-end;

      }



      .align-self-center {

        -ms-flex-item-align: center;

        -ms-grid-row-align: center;

        align-self: center;

      }



      .align-self-baseline {

        -ms-flex-item-align: baseline;

        align-self: baseline;

      }