极客时间-轻松学习，高效学习-极客邦

许童童

2019-04-13

flex好用，gird更好用。会讲一下吗？

 1

 8

cjd

2019-04-15

直接calc(100% - n)



 4

阿成

2019-04-15

https://gist.github.com/aimergenge/e26193440fa38ebbb9a54847540c29c7



 4

KingSwim

2019-08-14

希望可以图文并茂一些



 3

靠人品去赢

2019-06-19

flex是我刚开始做小程序，学到的第一个东西，真的好用，结合一些别的属性能解决很多兼容问题，而不再出现一机一况的情况，但是有的的时候，在做安卓和苹果的时候还是会遇到兼容性问题，能不能讲一下安卓和苹果的一些不同，比如在一个安卓上正常，在苹果上会出现边框被吃掉一部分的情况。

作者回复: 兼容问题怎么可能有一下子解决的方法呢，我也是case by case去看的啊



 3

favorlm

2019-04-14

自动填充剩余宽度
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>自适应宽</title>
    <style>
      .box {
        position: absolute;
        width: 300px;
        height: 100px;
        background-color: cyan;
      }
      .childbox1Attr {
        position: absolute;
        background-color: bisque;
        width: 35px;
        height: 35px;
      }
      .childbox2Attr {
        position: absolute;
        background-color: beige;
        width: 35px;
        height: 35px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="childbox1Attr"></div>
      <div class="childbox2Attr"></div>
    </div>
    <script>

            const childbox1Attr = {
                width: '100'
            };
            const childbox2Attr = {
                width: '100',
                flex: '1'
            };
            const box = document.getElementsByClassName('box')[0];
            const childbox1Ele = document.getElementsByClassName('childbox1Attr')[0];
            const childbox2Ele = document.getElementsByClassName('childbox2Attr')[0];
            const boxcomputedStyle = window.getComputedStyle(box, null);
            const child1ComputedStyle = window.getComputedStyle(childbox1Ele, null);
            childbox1Ele.style.width = childbox1Attr.width+'px';
            if(childbox2Attr.flex !== null || childbox2Attr.flex!==''){
                if(childbox2Attr.flex === '1'){
                    // 利用一下不安全特性，实在不知道怎么写
                    const childbox2EleWidth = boxcomputedStyle["width"].substring(0,3) - child1ComputedStyle["width"].substring(0,3);
                    childbox2Ele.style.width = childbox2EleWidth + 'px';
                    childbox2Ele.style.left = child1ComputedStyle["width"]
                }
            }

        </script>
  </body>
</html>

展开



 3