// 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;
}