flex属性简写

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
  • flex默认值等同于flex:0 1 auto；
  • flex:none等同于flex:0 0 auto；
  • flex:auto等同于flex:1 1 auto；
  • flex:1等于flex:1 1 0 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

 

实例一

<body>
    <div style="background-color: yellow; height: 200px;width:800px;flex:1;display: flex;">
        <div style="flex:1;display: flex; background-color: red">
            <div>child a</div>
            <div style="flex: 1;">&nbsp;</div>
            <div style="">child b</div>
        </div>
        <div style="background-color: green">left space</div>
    </div>
</body>

运行结果

flex属性 随笔

结论

  1. 子元素flex:1时，会占据所有的剩余空间

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄