flex布局简单兼容性写法

妖狐艹你老母 2022-02-04 17:17 414阅读 0赞

/* 定义 */
    .flex-def {
      display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
      display: -moz-box; /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox; /* 混合版本语法: IE 10 */
      display: -webkit-flex; /* 新版本语法: Chrome 21+ */
      display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    }
    
    /* 主轴居中 */
    .flex-zCenter {
      -webkit-box-pack: center;
      -moz-justify-content: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
    
    /* 主轴两端对齐 */
    .flex-zBetween {
      -webkit-box-pack: justify;
      -moz-justify-content: space-between;
      -webkit-justify-content: space-between;
      justify-content: space-between;
    }
    
    /* 主轴end对齐 */
    .flex-zEnd {
      -webkit-box-pack: end;
      -moz-justify-content: flex-end;
      -webkit-justify-content: flex-end;
      justify-content: flex-end;
    }
    
    /* 主轴start对齐 */
    .flex-zStart {
      -webkit-box-pack: start;
      -moz-justify-content: start;
      -webkit-justify-content: start;
      justify-content: start;
    }
    
    /* 侧轴居中 */
    .flex-cCenter {
      -webkit-box-align: center;
      -moz-align-items: center;
      -webkit-align-items: center;
      align-items: center;
    }
    
    /* 侧轴start对齐 */
    .flex-cStart {
      -webkit-box-align: start;
      -moz-align-items: start;
      -webkit-align-items: start;
      align-items: start;
    }
    
    /* 侧轴底部对齐 */
    .flex-cEnd {
      -webkit-box-align: end;
      -moz-align-items: flex-end;
      -webkit-align-items: flex-end;
      align-items: flex-end;
    }
    
    /* 侧轴文本基线对齐 */
    .flex-cBaseline {
      -webkit-box-align: baseline;
      -moz-align-items: baseline;
      -webkit-align-items: baseline;
      align-items: baseline;
    }
    
    /* 侧轴上下对齐并铺满 */
    .flex-cStretch {
      -webkit-box-align: stretch;
      -moz-align-items: stretch;
      -webkit-align-items: stretch;
      align-items: stretch;
    }
    
    /* 主轴从上到下 */
    .flex-zTopBottom {
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
    }
    
    /* 主轴从下到上 */
    .flex-zBottomTop {
      -webkit-box-pack: end;
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -moz-flex-direction: column-reverse;
      -webkit-flex-direction: column-reverse;
      flex-direction: column-reverse;
    }
    
    /* 主轴从左到右 */
    .flex-zLeftRight {
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -moz-flex-direction: row;
      -webkit-flex-direction: row;
      flex-direction: row;
    }
    
    /* 主轴从右到左 */
    .flex-zRightLeft {
      -webkit-box-pack: end;
      -webkit-box-direction: reverse;
      -webkit-box-orient: horizontal;
      -moz-flex-direction: row-reverse;
      -webkit-flex-direction: row-reverse;
      flex-direction: row-reverse;
    }
    
    /* 是否允许子元素伸缩 */
    .flex-item {
      -webkit-box-flex: 1.0;
      -moz-flex-grow: 1;
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
    /* 子元素的显示次序 */
    .flex-order{
      -webkit-box-ordinal-group: 1;
      -moz-order: 1;
      -webkit-order: 1;
      order: 1;
    }