/* 弹性布局 */.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-hc { -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: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start;}/* 侧轴居中 */.flex-ac { -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: flex-start; -webkit-align-items: flex-start; align-items: flex-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-shrink { -webkit-box-flex: 0; -moz-flex-shrink: 0; -webkit-flex-shrink: 0; flex-shrink: 0;}/*各个行中间对齐*/.flex-container { -webkit-align-content: center; align-content: center;}/*各个行中间对齐*/.flex-container { -webkit-align-content: flex-start; align-content: flex-start;}/*各个行中间对齐*/.flex-container { -webkit-align-content: flex-end; align-content: flex-end;}/*各个行平均分布*/.flex-container { -webkit-align-content: space-between; align-content: space-between;}/*各个行两端保留子元素与子元素之间间距大小的一半*/.flex-container { -webkit-align-content: space-around ; align-content: space-around ;}/*父元素-横向换行 */.flex-wrap{ -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap:wrap;}/*父元素-不容许横向换行 */.flex-nowrap{ -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap:nowrap;}/*充满父元素*/.flex1{ -prefix-box-flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1;}