flex布局详解

[chenfei-hnu]

Flex弹性盒子布局元素，目前常用的较为灵活的列表布局方式

设为flex布局以后，子元素的float、clear和vertical-align属性将失效

flex属性是flex-grow，flex-shrink 和 flex-basis的缩写

display:flex情况下，flex默认为initial，默认值分别为0,1,auto flex为auto时，默认值分别为1,1,auto flex为none时，默认值分别为0,0,auto

flex-grow 0|1 是否会增长变大占据flex容器中额外的剩余空间，非0时且容器长度大于flex-basis长度值总和时，按数值比例分配多余的长度 flex-shrink 0|1 是否会收缩变小以适合容器，非0时且容器长度小于flex-basis长度值总和时，按数值比例减少不足的长度 flex-basis auto|长度值 尺寸根据自身宽高属性进行调整|容器没有增长或缩小时的基础宽度数值 当内容长度大于flex-basis长度时，内容按最小内容宽度显示 flex-basis数值属性值和width数值属性值不要同时使用，否则可能存在内容超出元素等兼容问题 flex-basis长度值基于content-box标准盒模型

支持如下几种常用写法 1个值 值为数值时，如flex: 1

• 表示flex-grow为1，flex-shrink和flex-basis都使用默认值，分别是1和auto 值为长度值，如flex: 100px
• 表示flex-basis为100px，此时flex-grow和flex-shrink都使用默认值，分别是0和1

2个值，如果flex的属性值有两个值，则第1个值一定指flex-grow 第二个值为数值时，如flex: 1 2

• 2表示flex-shrink，此时flex-basis使用默认值auto 第二个值为长度值时，如flex: 1 100px
• 100px指flex-basis，此时flex-shrink都使用默认值1

其他常用的flex相关属性

flex容器属性 1.flex-direction 元素在容器中的排列方式

• row 主轴水平方向，起点在左端
• row-reverse 主轴水平方向，起点在右端
• column 主轴垂直方向，起点在上沿
• column-reverse 主轴在垂直方向，起点在下沿

2.flex-wrap 元素在容器中的换行情况

• nowarp 默认不换行
• wrap 换行，第一行在上面
• wrap-reverse 换行，第一行在下面

3.flex-flow flex-direction 属性和flex-wrap属性的简写，默认值row、nowrap

4.justify-content 元素在容器中的对齐方式

• flex-start 默认左对齐
• flex-end 右对齐
• center 居中
• space-between 两端对齐，项目之间的间隔相等
• space-around 每个项目两侧的间距相等

flex元素属性 1.order：number 数值越小越靠前，默认为0

几种常见布局的flex写法

1.按比例布局，子元素按比例分配

.flexContainer{
  width: 500px;
  height: 200px;
  display: flex;
}
.flexChild:nth-child(1){
 flex:2;
}
.flexChild:nth-child(2){
 flex:1;
}

2.定宽布局

.flexContainer{
  width: 500px;
  height: 200px;
  display: flex;
}
.flexChild:nth-child(1){
 flex: 0 0 100px;
}
.flexChild:nth-child(2){
 flex:auto;
}

3.流式布局

.flexContainer{
  width: 500px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}
.flexChild{
 flex: 0 0 50%;
}

4.流水布局居中显示

.flexContainer{
  width: 500px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flexChild{
 flex: 0 0 50%;
}

5.水平垂直居中

.flexContainer{
  width: 400px;
  height: 400px;
  display: flex;
   justify-content: center;
  align-items: center;
}
.flexChild{
     flex-basis: 33%;
    height: 33%;
}