ul, ol, li {
    list-style: none;
}

a {
    text-decoration: none;
}
.flex {
    /* 设置弹性布局 */
    display: -webkit-box; /* android 2.1-3.0, ios 3.2-4.3 */
    display: -webkit-flex; /* Chrome 21+ */
    display: -ms-flexbox; /* WP IE 10 */
    display: flex; /* android 4.4 */
}

.flex-direction-column {
    /* 设置弹性布局的方向，子元素按照在源文档中声明的顺序从上到下显示 */
    -webkit-box-orient: vertical; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-flex-direction: column; /* Chrome 21+ */
    -ms-flex-direction: column; /* WP IE 10 */
    flex-direction: column; /* android 4.4 */
}

.flex-1 {
    /* 子元素自动占据剩余的空间 */
    -webkit-box-flex: 1; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-flex: 1; /* Chrome 21+ */
    -ms-flex: 1; /* WP IE 10 */
    flex: 1; /* android 4.4 */
}

.flex-pack-center {
    /* 水平布局下的子元素 水平居中 */
    -webkit-box-pack: center; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: center; /* Chrome 21+ */
    -ms-flex-pack: center; /* WP IE 10 */
    justify-content: center; /* android 4.4 */
}

.flex-pack-right {
    /* 水平布局下的子元素 右对齐 */
    -webkit-box-pack: justify; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: space-around; /* Chrome 21+ */
    -ms-flex-pack: justify; /* WP IE 10 */
    justify-content: flex-end; /* android 4.4 */
}

.flex-pack-space-around {
    /* 水平布局下的子元素 水平居中 两边也空有间隙（且是均等的）*/
    -webkit-box-pack: justify; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: space-around; /* Chrome 21+ */
    -ms-flex-pack: justify; /* WP IE 10 */
    justify-content: space-around; /* android 4.4 */
}

.flex-align-center {
    /* 水平布局下的子元素 垂直居中 */
    -webkit-box-align: center; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-align-items: center; /* Chrome 21+ */
    -ms-flex-align: center; /* WP IE 10 */
    align-items: center; /* android 4.4 */
}
.flex-align-end{
    /* 水平布局下的子元素 底部对齐 */
    -webkit-box-align:end; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-align-items: end; /* Chrome 21+ */
    -ms-flex-align: end; /* WP IE 10 */
    align-items: flex-end;
}
.flex-pack-justify {
    /* 水平布局下的子元素 2端对齐 */
    -webkit-box-pack: justify; /* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: space-between; /* Chrome 21+ */
    -ms-flex-pack: justify; /* WP IE 10 */
    justify-content: space-between; /* android 4.4 */
}

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

.flex-flow-column {
    /* y轴换行 */
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}

.flex-grow1 {
     /* 如果所有项目的flex-grow属性都为1，它们将等分剩余空间（如果有的话） */
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}