flex属性

时间 2019-12-15

标签 flex 属性栏目 Flex 繁體版

原文原文链接

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 让全部弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

实例一spa

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

运行结果3d

结论code

子元素flex:1时，会占据全部的剩余空间

1. 项目所属性：order属性、flex-grow属性、flex-shrink属性
2. flex属性值
3. flex属性
4. flex data属性
5. flex属性详解
6. flex布局属性
7. dispay的flex属性
8. Flex布局的属性之 flex-direction属性
9. flex入门—了解这些flex属性
10. flex布局之flex容器属性
更多相关文章...
• WebSecurity 属性 - CurrentUserName - ASP.NET 教程
• WebSecurity 属性 - HasUserId - ASP.NET 教程
• JDK13 GA发布：5大特性解读
• 互联网组织的未来：剖析GitHub员工的任性之源