flex布局常用样式
// flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
// flex 左对齐 顶对齐
.flex{
display: flex; //
align-items: flex-start; // 项目在交叉轴上如何对齐
justify-content: flex-start; // 项目在主轴上的对齐方式
}
// flex 左右居中，上下居中
.flexCenter {
display: flex; //
align-items: center ; // 项目在交叉轴上如何对齐
justify-content: center; // 项目在主轴上的对齐方式
}
.flex-column{
display: flex;
flex-direction: column; // 项目主轴的排列方向。column：主轴为垂直方向，起点在上沿。
align-items: flex-start;
justify-content: flex-start;
}
// 垂直居中布局
.flexClsDirectcolumn {
display: flex;
flex-direction: column;
flex-wrap:wrap;
align-items:flex-start;
justify-content: center;
}
.flexClsDirectcolumn > div{
white-space: nowrap;
}
// 左对齐布局
.flexClsDirectLeft {
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: flex-start;
}
// 左对齐布局,换行
.flexClsDirectwWrapLeft {
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: flex-start;
}
// 居中布局,不换行自动撑开
.flexClsLeftLinkAutoWid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start
}
// 左对齐布局,换行不撑开，直接紧跟上一个换行
.flexClsDirectwWrapLeftStart {
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: flex-start;
align-content: flex-start
}
// 右对齐布局
.flexClsDirectRight {
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: flex-end;
}
// 两端对齐,不换行，项目之间的间隔都相等
.flexClsNowrapSpcBtw {
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-between;
}
// 两端对齐,不换行，每个项目两侧的间隔相等
.flexClsNowrapSpcArd {
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-around;
}
// 两端对齐,超出换行，每个项目两侧的间隔相等
.flexClsWrapSpcArd {
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: space-between;
}
.flex1{
flex: 1;
}
// 用于垂直布局，固定一个div高度，另一个div填充剩余的高度
.flexColumBox {
display: flex;
flex-flow: column;
align-items: stretch;
}
// 固定高度
.fixedHig{
flex: 0;
}
// 自动填充剩余区域
.autoFullHig{
flex: 1;
}
// 用于水平布局，固定一个div的宽度，另一个div填充剩余的宽度 //父级flex
.flexWidthBox{
display: flex;
}
// flex属性是flex-grow(放大比例）, flex-shrink（缩小比例） 和 flex-basis（根据剩余空间进行分配计算）的简写，默认值为0 1 auto。后两个属性可选。
// 自适应宽度的，css
.autoFullWidth{
flex:1 1 auto;
}
// 固定宽度，不放缩
.fixWidth{
flex:0 0 auto;
}
