六个案例学会响应式布局_技术问答

首页免费课六个案例学会响应式布局问答

六个案例学会响应式布局

                
                大谷
            Web前端工程师

                    查看讲师更多课程 
                    大谷讲师的其他课程
                
Map从入门到性能分析
初级·8543
免费课程
                                
4小时快速体验ES6-10的强大
慕课微课·入门·2292

                                                                                                                                    ￥36.00
                                            
vue-cli全集
入门·44765
免费课程
                                
解密IconFont字体图标
初级·6413
免费课程
                                
                难度入门
            
                时长 2小时41分
            
                学习人数
            
综合评分9.93
                            17人评价
                        查看评价
                                9.9
                                内容实用
                            
                                10.0
                                简洁易懂
                            
                                9.9
                                逻辑清晰

全部评论问答未解决精华

慕UI2478098

免费的比收费的还好

1 3-4 flex-交叉轴的对齐方式

2021-06-27

weixin_宝慕林0112487

举个例子：
#div0{
width:200px;
display:flex;
height:500px;
}
#div0 div:nth-child(1){
flex:0 1 150px;
}
#div0 div:nth-child(2){
flex:0 1 250px;
}
用他的错误计算方法是
200-（150+250）=-200
-200/2=-100
div1:150-100=50
div2:250-100=150
而正确值是75和125

2 3-5 flex-给子元素设置伸缩比例flex属性

2021-06-23

weixin_宝慕林0112487

10:45秒计算 flex-shrink 的方法是错误的。
错误的方法却造成了正确的结果是由于两个元素的flex-basis一样。
正确的算法应该是：
1：计算差值 400-（300+300）=-200
2：计算权重 300*1+300*3=1200
3：计算被移除量：
div1:-200*1(flex-shrink)*300/1200=-50
div2:-200*3(flex-shrink)*300/1200=-150
实际宽度：
div1:300-50=250
div2:300-150=150

2 3-5 flex-给子元素设置伸缩比例flex属性

2021-06-23