【css】flexible.css - flex布局的兼容写法

flex理解

阮一峰flex教程
flex基本概念
flex： flex-grow、flex-shrink、flex-basis的简写和全写
flex和flex:1的含义

全局定义

.flex {
    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-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -webkit-box-lines: multiple;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
}

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

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

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

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

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

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

.flex-1 {
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    -moz-flex-grow: 1;
}

用法示例

<!--水平展示， 上下居中-->
<div class="flex flex-x-between flex-y-center">
            <div>点击展开</div>
            <div class="flex-1 icon-arr-right"></div>
</div>

<!--垂直展示， 左右居中-->
<div class="flex flex-column flex-y-center">
            <div>case1</div>
            <div>case1</div>
</div>