从前端小白到大佬 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是对整体子项作用的

不演示

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页