flex布局常用样式_flex 布局 css 公共样式表

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

}