乐趣区

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;}
退出移动版