flex布局兼容写法

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-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-wrap-no {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

.flex-justify-content-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.flex-justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.flex-justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-justify-content-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flex-align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-align-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.flex-align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-align-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.flex-align-items-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


.flex-align-content-start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.flex-align-content-end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.flex-align-content-center {
    -ms-flex-line-pack: center;
    align-content: center;
}

.flex-align-content-between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

.flex-align-content-around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

.flex-align-content-stretch {
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.flex-align-self-auto {
    -ms-flex-item-align: auto;
    align-self: auto;
}

.flex-align-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.flex-align-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.flex-align-self-center {
    -ms-flex-item-align: center;
    align-self: center;
}

.flex-align-self-baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

.flex-align-self-stretch {
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-none {
    /* flex:0 0 auto*/
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.flex-auto {
    /* flex:1 1 auto */
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/*timeline*/
.form-timeline{width: 100%;padding: 30px 0;}
.form-timeline ul{padding: 0 10%;list-style: none;display:flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;box-sizing: border-box;line-height: 1.5;margin: 0;width: 100%;}
.form-timeline ul li{overflow: hidden;color: #e4e4e4;}
.form-timeline ul li .step-icon{position: relative;box-sizing: border-box;width: 32px;height: 32px;line-height: 32px;border-radius: 32px;text-align: center;border: 2px solid #e4e4e4;}
.form-timeline ul li .step-icon:after{content: "";height: 2px;width: 9999px;background: #e4e4e4;display: block;position: absolute;top: 14px;left: 100%;}
.form-timeline ul li:last-child .step-icon:after{display: none;}
.form-timeline ul li .step-name{text-align: left;margin-top: 10px;}
.form-timeline ul li.finished{display: inline-block;flex: 1;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;color: #1890ff;}
.form-timeline ul li.finished .step-icon{border: 2px solid #1890ff;}
.form-timeline ul li.finished .step-icon:after{background: #1890ff}
.form-timeline ul li.actived{display: inline-block;flex: 1;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;color: #fff;}
.form-timeline ul li.actived .step-icon{background: #1890ff;border: none;}
.form-timeline ul li.actived .step-icon:after{background: #1890ff}
.form-timeline ul li.actived .step-name{color: #1890ff;}
.form-timeline ul li:not(:last-child){flex: 1;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;}