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