從前端小白到大佬 flex下

那個收破爛的發表於2020-10-29
前端Flex

從前端小白到大佬 flex下

上次說了flex作用於父元素的語句，這一篇說作用於子元素的語句。
在這裡插入圖片描述

①order 排序，數值越小越靠前，數值越大越靠後

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent1 {
            width: 300px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 20px auto;
            display: flex;
        }
        
        #box:nth-child(2) {
            order: 1;
        }
        
        #box:nth-child(4) {
            order: -1;
        }
        
        #box {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="parent1 ">
        <div id="box">1</div>
        <div id="box">2</div>
        <div id="box">3</div>
        <div id="box">4</div>
    </div>
</body>

</html>

排序 -1>0>1
在這裡插入圖片描述
②flex-grow 擴充套件（有空白空間時）
數值即比例，取1時則自身+空白區域100%；0，保持；0.5，自身+擴充套件空白50%；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent1 {
            width: 300px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 20px auto;
            display: flex;
        }
        
        #box {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        
        #box:nth-child(2) {
            background-color: rebeccapurple;
            flex-grow: 0.4;
        }
    </style>
</head>

<body>

    <div class="parent1 ">
        <div id="box">1</div>
        <div id="box">2</div>
        <div id="box">3</div>
        <div id="box">4</div>
    </div>
</body>

</html>

在這裡插入圖片描述
③flex-shrink 收縮（空間不足是）
0表示不收縮，0.5收縮比例，1正常收縮，2倍數收縮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent1 {
            width: 400px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 20px auto;
            display: flex;
        }
        
        #box {
            width: 100px;
            height: 50px;
            background-color: red;
        }
        
        #box:nth-child(2) {
            background-color: rebeccapurple;
            flex-shrink: 0.52;
        }
    </style>
</head>

<body>

    <div class="parent1 ">
        <div id="box">1</div>
        <div id="box">2</div>
        <div id="box">3</div>
        <div id="box">4</div>
        <div id="box">5</div>
    </div>
</body>

</html>

在這裡插入圖片描述
④flex-basis 寬度
與width作用一致，優先順序比width高

⑤flex：grow shrink basis；
是2，3，4的複合寫法 ，shrink basis可省

⑥align-self
單獨個體的對齊方式，與align-items可取屬性一致，但align-items是對整體子項作用的
不演示

相關文章