flexbox - flex-grow、flex-shrink、flex-basis

Posted on Edited on In Views: Disqus:

 

一、flex-grow

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            align-items: stretch;
            background-color: #f1f1f1;
        }

            .flex-container > div {
                background-color: DodgerBlue;
                color: white;
                margin: 10px;
                text-align: center;
                line-height: 75px;
                font-size: 30px;
                transition: 0.8s;
                flex: 1;
            }

        .f1:hover {
            flex: 2;
        }

        .f2:hover {
            flex: 2;
        }

        .f3:hover {
            flex: 8;
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="f1">aaa</div>
        <div class="f2">bbb</div>
        <div class="f3">ccc</div>
    </div>

    <p>Use the <em>flew-grow</em> property to specify how well the items should grow.</p>

</body>
</html>

相等於

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            align-items: stretch;
            background-color: #f1f1f1;
        }

            .flex-container > div {
                background-color: DodgerBlue;
                color: white;
                margin: 10px;
                text-align: center;
                line-height: 75px;
                font-size: 30px;
                transition: 0.8s;
                flex-grow: 1;
            }

        .f1:hover {
            flex-grow: 2;
        }

        .f2:hover {
            flex-grow: 2;
        }

        .f3:hover {
            flex-grow: 8;
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="f1">aaa</div>
        <div class="f2">bbb</div>
        <div class="f3">ccc</div>
    </div>

    <p>Use the <em>flew-grow</em> property to specify how well the items should grow.</p>

</body>
</html>

flex-grow 屬性是用來控制元素相對被拉長的比率，

預設值為零，只接受大於等於零的數字，數值無單位。

數值零代表 flex-grow 屬性無作用，數值 1代表成長比率為1。

 

二、flex-shrink

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            align-items: stretch;
            background-color: #f1f1f1;
        }

            .flex-container > div {
                background-color: DodgerBlue;
                color: white;
                margin: 10px;
                text-align: center;
                line-height: 75px;
                font-size: 30px;
                transition: 0.8s;
                width: 50%;
            }

        .f1:hover {
            flex-shrink: 4;
        }

        .f2:hover {
            flex-shrink: 2;
        }

        .f3:hover {
            flex-shrink: 0;
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="f1">aaa</div>
        <div class="f2">bbb</div>
        <div class="f3">ccc</div>
    </div>

    <p>Use the <em>flew-shrink</em> property to specify how well the items should shrink.</p>

</body>
</html>

flex-shrink 屬性是用來控制元素被壓縮比率，

預設值為1，可以為0，不接受負數，無單位。

數值越大表示壓縮比越大，數值越小表示壓縮比越小。

 

三、flex-basis

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            align-items: stretch;
            background-color: #f1f1f1;
        }

            .flex-container > div {
                background-color: DodgerBlue;
                color: white;
                margin: 10px;
                text-align: center;
                line-height: 75px;
                font-size: 30px;
                transition: 0.8s;
            }

        .f1:hover {
            flex-basis: 50px;
        }

        .f2:hover {
            flex-basis: 100px;
        }

        .f3:hover {
            flex-basis: 200px;
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="f1">aaa</div>
        <div class="f2">bbb</div>
        <div class="f3">ccc</div>
    </div>

    <p>Use the <em>flew-basis</em> property to specify how well the items should shrink.</p>

</body>
</html>

flex-basis 屬性數值單位為 px，也可以是 %，也可以設定 auto，

表示設定該子元素在做縮放比率時會參考 flex-basis 屬性所指定的值做基準。

 

四、flex 簡寫

flex 簡寫可以有三種語法，

分別是

1、One-value syntax

無單位的數值將會被表示成 flex-grow，

有單位的數值將會被表示成 flex-basis，

也可接受 none、auto、initial 關鍵字。

 

一些數值的表示範例如下：

a、flex 初始值為 flex : initial; 相等於 flex : 0 1 auto;

b、flex : auto; 相等於 flex :1 1 auto;

c、flex : none; 相等於 flex : 0 0 auto;

d、flex : 2; 相等於 flex : 2 1 0;

 

2、Twe-value syntax

第一個值必須為無單位數值將被表示成 flex-grow，

而第二個值如果是無單位數值，則將被表示為 flex-shrink，

如果是有單位數值，則將被表示為 flex-basis。

 

3、Three-value syntax

語法為flex: flex-grow flex-shrink flex-basis，

flex-grow：控制元素被拉長比率

flex-shrink：控制元素被壓縮比率

flex-basis：可同時控制成長與壓縮比率

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="brookes">
    <meta name="copyright" content="brookes">
    <title>brookes</title>
    <style>

        .flex {
            display: inline-flex;
            height: 60px;
            margin: 5px 5px 40px;
            border: 1px solid #000;
            vertical-align: top;
        }

        .flex-600 {
            width: 600px;
        }

        .flex-300 {
            width: 300px;
        }

        .flex-150 {
            width: 150px;
        }

        .flex-75 {
            width: 75px;
        }

        .item {
            height: 60px;
            text-align: center;
            line-height: 50px;
        }

        .item1 {
            flex: 1 2 200px;
            background: red;
        }

        .item2 {
            flex: 2 1 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="flex flex-600">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
    </div>
    <div class="flex flex-300">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
    </div>
    <div class="flex flex-150">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
    </div>
    <div class="flex flex-75">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
    </div>
</body>
</html>

 

參考資料：

MDN - flex