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