彈性佈局-做用在子容器的六大屬性

時間 2020-06-18

標籤彈性佈局用在容器六大屬性简体版

原文原文鏈接

2019-07-26html

① order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。flex

② flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。ui

③ flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。spa

④ flex-basis定義項目佔據的主軸空間。(若是主軸爲水平，則設置這個屬性，至關於設置項目的寬度。原width將會失效。)code

⑤ flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。htm

此屬性有兩個快捷設置：auto=(1 1 auto)/none=(0 0 auto)blog

⑥ align-self:定義單個項目自身在交叉軸上的排列方式，能夠覆蓋掉容器上的align-items屬性。繼承

屬性值：與align-items相同，默認值爲auto，表示繼承父容器的align-items屬性值。it

<!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>Document</title>
</head>
<style>
    .father_box{
        display: flex;
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
    }
    .father_box div{
        width: 100px;
        height: 100px;
        background-color: hotpink;
        border:1px solid black;
    }
    .son_box1{
        order: 1;
        /* box1就會跑到最後一位 默認值爲0 */
        /* flex-shrink: 0; */
        /* box1 不會被擠壓寬度 其他擠壓更嚴重 默認值爲1 
            全部div 都設置爲0，而且寬度不夠時， 多餘div將擠出父容器  
        */
    }
    .son_box2{
        flex-basis: 100%;
        /* box2將會佔father_box總寬度的一半 */
    }
    .son_box3{
        align-self: flex-end;
        /* box3會從下面開始 */
    }
    .son_box4{
        
    }
</style>
<body>
    <div class="father_box">
        <div class="son_box1">1</div>
        <div class="son_box2">2</div>
        <div class="son_box3">3</div>
        <div class="son_box4">4</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。