@charset "utf-8";

/**
 * flex 布局
 * 参考：https://www.w3cplus.com/css3/a-guide-to-flexbox-new.html
 */

/* 容器 */
.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}

/* 主轴方向 */
.flex-row{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-ms-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-direction:normal;-ms-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;}
.flex-row-reverse{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-ms-box-orient:horizontal;-webkit-box-direction:reverse;-moz-box-direction:reverse;-ms-box-direction:reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}
.flex-col{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;-webkit-box-direction:normal;-moz-box-direction:normal;-ms-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;}
.flex-col-reverse{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-direction:reverse;-ms-box-direction:reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;}

/* 换行 */
.flex-wrap{-webkit-flex-wrap:wrap;flex-wrap:wrap;}

/* 方向 + 换行 */
.flex-flow{-webkit-flex-flow:row wrap;flex-flow:row wrap;}

/**
 * 主轴对齐方式 justify-content
 * 最老版本不支持 space-around
 * 参考：https://www.w3cplus.com/sites/default/files/blogs/2015/1504/justify-content.svg
 */
.flex-jc-start{-webkit-box-pack:start;-moz-box-pack:start;-ms-box-pack:start;justify-content:flex-start;}
.flex-jc-end{-webkit-box-pack:end;-moz-box-pack:end;-ms-box-pack:end;justify-content:flex-end;}
.flex-jc-center{-webkit-box-pack:center;-moz-box-pack:center;-ms-box-pack:center;justify-content:center;}
.flex-jc-between{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-box-pack:justify;justify-content:space-between;}
.flex-jc-around{justify-content:space-around;}

/**
 * 侧轴对齐方式 align-items
 * 参考：https://www.w3cplus.com/sites/default/files/blogs/2015/1504/align-items.svg
 */
.flex-ai-start{-webkit-box-align:start;-moz-box-align:start;-ms-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;}
.flex-ai-end{-webkit-box-align:end;-moz-box-align:end;-ms-box-align:end;-webkit-align-items:flex-end;align-items:flex-end;}
.flex-ai-center{-webkit-box-align:center;-moz-box-align:center;-ms-box-align:center;-webkit-align-items:center;align-items:center;}
.flex-ai-baseline{-webkit-box-align:baseline;-moz-box-align:baseline;-ms-box-align:baseline;-webkit-align-items:baseline;align-items:baseline;}
.flex-ai-stretch{-webkit-box-align:stretch;-moz-box-align:stretch;-ms-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;}

/**
 * 多行对其方式 align-content
 * 参考：https://www.w3cplus.com/sites/default/files/blogs/2015/1504/align-content.svg
 */
.flex-ac-start{-webkit-align-content:flex-start;align-content:flex-start;}
.flex-ac-end{-webkit-align-content:flex-end;align-content:flex-end;}
.flex-ac-center{-webkit-align-content:center;align-content:center;}
.flex-ac-between{-webkit-align-content:space-between;align-content:space-between;}
.flex-ac-around{-webkit-align-content:space-around;align-content:space-around;}
.flex-ac-stretch{-webkit-align-content:stretch;align-content:stretch;}

/* 伸缩项目所占比例 */
.flex-item-1,.flex-main{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-item-2{-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-item-3{-webkit-box-flex:3;-moz-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-item-4{-webkit-box-flex:4;-moz-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4;}
.flex-item-5{-webkit-box-flex:5;-moz-box-flex:5;-webkit-flex:5;-ms-flex:5;flex:5;}
.flex-item-6{-webkit-box-flex:6;-moz-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6;}

/**
 * 单个 item 对齐方式
 * 参考：https://www.w3cplus.com/sites/default/files/blogs/2015/1505/align-self.svg
 */
.flex-item-start{-webkit-align-self:flex-start;align-self:flex-start;}
.flex-item-end{-webkit-align-self:flex-end;align-self:flex-end;}
.flex-item-center{-webkit-align-self:center;align-self:center;}
.flex-item-baseline{-webkit-align-self:baseline;align-self:baseline;}
.flex-item-stretch{-webkit-align-self:stretch;align-self:stretch;}