/*css3 弹性布局 flex  注意使用该布局方式不支持ie10以下的浏览器 无法使用float clear等方式进行布局*/
/*容器使用flex*/
.bt-box-flex{
    display: flex;
    display: -webkit-flex;
}
/*行内元素使用flex*/
.bt-box-innerflex{
    display: -webkit-inline-flex;
    display: inline-flex;
}
/*容器属性-flex-direction 属性决定主轴方向*/
.bt-flexdir-row{
    flex-direction: row;/*默认值 主轴为水平方向，起点在左端*/
}
.bt-flexdir-rowre{
    flex-direction: row-reverse;/* 主轴为水平方向，起点在右端*/
}
.bt-flexdir-column{
    flex-direction: column;/*主轴为垂直方向，起点在上沿*/
}
.bt-flexdir-columnre{
    flex-direction: column-reverse;/*主轴为垂直方向，起点在下沿*/
}
/*容器属性 flex-wrap 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。*/
.bt-flexwrap-nowrap{
    flex-wrap: nowrap;/*不换行*/
}
.bt-flexwrap-wrap{
    flex-wrap: wrap;/*换行，第一行在上方*/
}
.bt-flexwrap-wrapre{
    flex-wrap: wrap-reverse;/*换行，第一行在下方*/
}
/*容器属性 justify-content 定义了项目在主轴上的对齐方式。*/
.bt-juscon-flexstart{
    justify-content: flex-start;/*默认 左对齐*/
}
.bt-juscon-flexend{
    justify-content: flex-end;/*右对齐*/
}
.bt-juscon-center{
    justify-content: center;/*居中*/
}
.bt-juscon-spacebe{
    justify-content: space-between;/*两端对齐，项目之间的间隔都相等*/
}
.bt-juscon-spacear{
    justify-content: space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
}
/*容器属性align-items 定义项目在交叉轴上如何对齐。*/
.bt-alignitems-flexstart{
    align-items: flex-start;/*交叉轴起点对齐*/
}
.bt-alignitems-flexend{
    align-items: flex-end;/*交叉轴的终点对齐*/
}
.bt-alignitems-center{
    align-items: center;/*交叉轴的终点对齐*/
}
.bt-alignitems-stretch{
    align-items: stretch;/*默认值 如果项目未设置高度或设为auto，将占满整个容器的高度*/
}
.bt-alignitems-baseline{
    align-items: baseline;/*项目的第一行文字的基线对齐*/
}
/*容器属性 align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
.bt-aligncon-flexstart{
    align-content: flex-start;/*与交叉轴的起点对齐*/
}
.bt-aligncon-flexend{
    align-content: flex-end;/*与交叉轴的终点对齐*/
}
.bt-aligncon-center{
    align-content: center;/*与交叉轴的中点对齐*/
}
.bt-aligncon-stretch{
    align-content: stretch;/*默认值 轴线占满整个交叉轴*/
}
.bt-aligncon-spacebe{
    align-content: space-between;/*与交叉轴两端对齐，轴线之间的间隔平均分布*/
}
.bt-aligncon-spacear{
    align-content: space-around;/*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
}
/*元素属性 flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大*/
.bt-flexgrow-0{
    flex-grow: 0;
}
.bt-flexgrow-1{
    flex-grow: 0;
}
.bt-flexgrow-2{
    flex-grow: 0;
}
/*如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。*/
/*元素属性 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小*/
.bt-flexshr-0{
    flex-shrink: 0;
}
.bt-flexshr-1{
    flex-shrink: 1;
}
/*如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。*/
/*元素属性 align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
.bt-alignse-auto{
    align-self: auto;/*默认值*/
}
.bt-alignse-flexstart{
    align-self: flex-start;
}
.bt-alignse-flexend{
    align-self: flex-end;
}
.bt-alignse-center{
    align-self: center;
}
.bt-alignse-baseline{
    align-self: baseline;
}
.bt-alignse-stretch{
    align-self: stretch;
}
/*该属性可以取6个值，除了auto，其他都与align-items属性完全一致。*/