flex属性

 

flex属性简写

  • 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>

运行结果

结论

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

 

posted @ 2019-05-14 17:47  小橙籽  阅读(267)  评论(0)  编辑  收藏  举报