felx布局--百度2020校招Web前端工程师笔试

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

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

答案：B  

解析：

flex: 3 2 50px; 是 CSS 中 Flexbox 布局相关的属性，表示了一个 flex item 的伸缩比例、最小宽度和最大宽度。

具体来说，flex: 3 2 50px; 等价于：

flex-grow: 3; /* 设置 flex item 的伸缩比例为 3 */
flex-shrink: 2; /* 设置 flex item 的收缩比例为 2 */
flex-basis: 50px; /* 设置 flex item 的基准宽度为 50px */

2种情况：
1、当多个子盒子的总宽度flex-basis<=父盒子时，使用的是flex-grow属性，则按比例分配剩余空间；
2、当多个子盒子的总宽度flex-basis>父盒子时，使用的是flex-shrink属性，计算规则：
            (1)计算超出父盒子的宽度：200+50-200 = 50;
            (2).left需要减少：(50*2)/(50*2+200*1) * 50 = 50/3
                .right需要减少：(200*1)/(50*2+200*1) * 50 = 100/3
            (3)最终left宽度：50-50/3 = 100/3
                right宽度：200-100/3 = 500/3
            (4)left和right比例：1:5