/*
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 换行，第一行在下方。
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;
}
*/



/* 弱提示 */
.god-showToast {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 5.2rem;
    height: 1.4rem;
    line-height: 1.4rem; */
    background: rgba(0, 0, 0, 0.60);
    border-radius: 0.1rem;
    font-size: 0.28rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    width: 65%;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.7); 
    color: #fff;
    font-weight: bold;
    border-radius: 0.2rem;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0rem;
    top: 48%;
    display: none;
}


button {
    border: none;
}



.fixedsticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
}

/* When position: sticky is supported but native behavior is ignored */
.fixedsticky-withoutfixedfixed .fixedsticky-off,
.fixed-supported .fixedsticky-off {
    position: static;
}

.fixedsticky-withoutfixedfixed .fixedsticky-on,
.fixed-supported .fixedsticky-on {
    position: fixed;
}

.fixedsticky-dummy {
    display: none;
}

.fixedsticky-on+.fixedsticky-dummy {
    display: block;
}