/*
flex flex-row justify-content-center align-items-center 主轴横向且水平垂直都居中
flex flex-column justify-content-center align-items-center 主轴竖向且水平垂直都居中

flex flex-row justify-content-space-between align-items-center 主轴横向且 ‘水平紧靠边缘’ 垂直中
flex flex-row justify-content-space-around align-items-center 主轴横向且 ‘水平均匀分布’ 垂直居中

flex flex-column justify-content-space-between align-items-center 主轴竖向且水平居中 ‘垂直紧靠边缘’
flex flex-column justify-content-space-around align-items-center 主轴竖向且水平居中 ’垂直均匀分布‘

-------------------------------------------------------------------

flex  设置为flex
inline-flex  行内flex

flex-row  主轴横向排列
flex-column 主轴纵向排列

属性定义了项目在主轴上的对齐方式
justify-content-flex-start 设主轴默认
justify-content-center  设置主轴居中
justify-content-end 设置主轴对齐底部
justify-content-space-between 设置主轴元素均分且紧贴两边
justify-content-space-around 设置主轴元素均分

属性定义项目在交叉轴上如何对齐
align-items-start 设置侧轴起点对齐
align-items-end  设置侧轴对齐底部
align-items-center 设置侧轴居中对齐
align-items-baseline 设置项目的第一行文字的基线对齐

多根轴线的对齐方式
align-content-start   与交叉轴的起点对齐
align-content-end     与交叉轴的终点对齐
align-content-center  与交叉轴的中点对齐
align-content-between 与交叉轴两端对齐，轴线之间的间隔平均分布
align-content-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
align-content-stretch （默认值）：轴线占满整个交叉轴


定义，如果一条轴线排不下，如何换行。
flex-wrap-nowrap 不换行
flex-wrap-wrap 换行，第一行在上方。
flex-wrap-reverse 换行，第一行在下方。

w100

flexCenter 居中

*/

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

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

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

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

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

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

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

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

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

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

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

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

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

.flex-wrap-nowrap {
    -webkit-box-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

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

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



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

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

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

.align-content-between {
    -webkit-box-align: space-between;
    -ms-flex-align: space-between;
    -webkit-align-conten: space-between;
    align-content: space-between;
}

.align-content-around {
    -webkit-box-align: space-around;
    -ms-flex-align: space-around;
    -webkit-align-conten: space-around;
    align-content: space-around;
}

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

.w100 {
    width: 100%;
}

.flexCenter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


/*  



写在设置为flex的子元素上的6个值 （需要改具体参数值） 注意是子元素

1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item{
-prefix-box-ordinal-group: 1; 
 -webkit-box-ordinal-group: 2;    
 -moz-box-ordinal-group: 2;       
 -ms-flex-order: 2;               
 -webkit-order: 2;                
 order: 2;  
}
 2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item{   
 -moz-flex-flex-grow: 2;         
 -ms-flex-flex-grow: 2;               
 -webkit-flex-grow: 2;                
 flex-grow: 2; 
}
3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item{
 -moz-flex-shrink: 2;         
 -ms-flex-shrink: 2;               
 -webkit-flex-shrink: 2;                
flex-shrink:: 2;
}
4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item{
 -moz-flex-basis: 2;         
 -ms-flex-basis: 2;               
 -webkit-flex-basis: 2;                
flex-basis:: 2;
}
5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{
 -moz-flex: 2;         
 -ms-flex: 2;               
 -webkit-flex: 2;                
flex:: 2;
}
6. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
*/