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員工的任性之源

相關標籤/搜索