弹性布局之flex

开启弹性布局

通过display: flex;属性开启弹性布局

flex的子元素如何分配空间

flex是flex-grow、flex-shrink 和 flex-basis 属性的简写

• 默认 0 1 auto
• 不继承
• flex-grow 扩展比率 剩余空间是正值时伸缩项目相对于伸缩容器里其他伸缩项目能分配到的空间比例 0 代表不参与扩展默认为 0
  剩余宽度 = 总宽度 - 元素的实际宽度
  元素扩展后宽度 = 元素原来的宽度 + （剩余宽度/比率之和 * 扩展比率）
• flex-shrink 缩小比例 剩余宽度不足时（剩下的宽度为负值）都将等比例缩小 0 表示不参加收缩比例默认为 1
  现在总体剩余宽度 = 总宽度（元素的实际宽度 - 自适应两个元素的宽度的和
  如果有元素不参与收缩 需要再减去不参与收缩元素的宽度
  元素收缩后宽度 = (元素的实际宽度/总宽度) * 剩余宽度
• flex-basis 在分配空间之前已经分得的空间即最小宽度，值：auto、inherit 或跟一个 %、px、em 或任何其他长度单位的数字

测试题

下列布局在页面上的宽度比是多少？

// css
.box {
    display: flex;
    width: 200px;
    height: 100px;
}
.left {
    flex: 3 2 50px;
    background: red;
}
.right {
    flex: 2 1 200px;
    background: blue;
}
// html
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

A 2:3 B 1:5 C 1:3 D: 3:2

正确答案是 B

解析

• 总宽是200
• left + right = 250
• 剩余宽度不足 200 - 250 = -50
• flex-shrink 仅在内容默认宽度之和大于容器的时候才会有效
  具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度
  • left: 50 * 2 = 100
  • right: 200 * 1 = 200
• 所以总权重为 100 + 200 = 300
• 元素收缩 = 剩余宽度 * 缩小⽐例 * 实际宽度 / 总权重
• 元素分别收缩：
  
  • left: -50 (剩余宽度) * 2（缩小⽐例） * 50（实际宽度） / 300（总权重） = -16.66666
    
  • right: -50 (剩余宽度) * 1（缩小⽐例） * 200（实际宽度） / 300（总权重） = -33.33333
• left值 50 - 16.66666 = 33.33333
• right值 200 - 33.33333 = 166.66667
• left : right = 1 : 5