Flex总结实际应用案例

flex总结

看大神的flex教程：http://www.ruanyifeng.com/blo…
思维导图总结——

标绿部分为 最常用的两个属性
标蓝部分为 合并属性

常见的flex布局

#经典布局
1.上中下（上下固定，中间自适应）

//改变主轴为竖直方向，依次排列上中下三部分，中间部分因为要自适应，所以将其放大比例设置为1
//父级
.father{
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}
//中间自适应高度
.middle{
   flex-grow: 1; 
}

2.左右（左边固定，右边自适应）

//父级设置为flex，右边需要自适应，因此将其放大比例设置为1
.father{
   display: flex;
}
.right{
   flex-grow: 1;
}

3.垂直居中

//主轴居中，交叉轴居中，即为垂直居中
.father{
   display: flex;
   justify-content: center;
   align-items: center;
}

4.两列等高

//当设置为flex时，align-items默认值为stretch，即占满整个容器的高度，因此子元素默认会与父级等高
.father{
   display: flex;
}

#flex中嵌入图片
1.直接嵌入图片

.father{
  display:flex;
  //默认为stretch，即图片会拉伸至整个容器的高度
  align-item:center;
}
.father img{
  //需要给图片设置一个宽度，之后在对齐是否缩放进行设定，才可以按照父级容器的大小对图片进行缩放
  width:1px;
  flex-grow:1;
}

2.div包裹图片
一般我们会在img外面包裹一层div，给img设置width:100%,此时的img也会按照比例进行缩放。

#flex+js计算
有时会遇到类似于下图的排版，需要多个标签并排排布，最左和最右标签均紧挨父级容器边缘(下图)。

直接使用justify-content: space-between;的话，最末一行的元素也会按照space-between的方式排布(下图)。

此时需要使用flex+js计算，将末尾空缺的位置进行填补。

//css部分
.father{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
}

//js部分
//计算出需要补充的标签个数，再根据个数填充即可
if(childList.length%4){
    var needNum=4-childList.length%4;
}