下列布局在页面上的宽度比是多少? // 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>-笔试面试资料

这是qklbishe.com第12401 篇笔试面试资料
提供答案分析,通过本文《下列布局在页面上的宽度比是多少? // 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>-笔试面试资料》可以理解其中的代码原理,这是一篇很好的求职学习资料
本站提供程序员计算机面试经验学习,笔试经验,包括字节跳动/头条,腾讯,阿里,美团,滴滴出行,网易,百度,京东,小米,华为,微软等互联网大厂真题学习背诵。

答案:
下列布局在页面上的宽度比是多少?

// 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>
下列布局在页面上的宽度比是多少? // css .flex {     display: flex;     width: 200px;     height: 100px; } .left {     flex: 3 2 50px;     background: red; } .right {     flex: 2 1 200px;     background: blue; } // html &lt;div class=&quot;flex&quot;&gt;     &lt;div class=&quot;left&quot;&gt;&lt;/div&gt;     &lt;div class=&quot;right&quot;&gt;&lt;/div&gt;  &lt;/div&gt; 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
今天 17:41:27 回复(0)

文章部分来自互联网,侵权联系删除
www.qklbishe.com

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 下列布局在页面上的宽度比是多少? // 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>-笔试面试资料

提供最优质的资源集合

立即查看 了解详情