Flex总结+实际应用案例

flex总结

看大神的flex教程:http://www.ruanyifeng.com/blo...
思维导图总结——
image.png
标绿部分为 最常用的两个属性
标蓝部分为 合并属性

常见的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计算
有时会遇到类似于下图的排版,需要多个标签并排排布,最左和最右标签均紧挨父级容器边缘(下图)。
微信截图_20200707165206.png
此时需要使用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;
}

你可能感兴趣的:(前端,flex)