首页 > 试题广场 >

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

[单选题]

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

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

```
2:3
```
```
1:5
```
```
1:3
```
```
3:2
```

查看正确选项

River_coder

有2种情况：
1、当多个子盒子的总宽度flex-basis<=父盒子时，使用的是flex-grow属性，按比例分配剩余空间；
2、当多个子盒子的总宽度flex-basis>父盒子时，使用的是flex-shrink属性，规则是
        .box{
            display:flex;
            width:200px;
            height:50px;
        }
        .left{
            flex:3 2 50px
        }
        .right{
            flex: 2 1 200px
        }

        计算规则：
            (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

发表于 2021-05-30 17:41:27 回复(0)