从前端小白到大佬 flex下

最新推荐文章于 2024-09-16 23:39:36 发布

一只琳娜

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量263

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/my_prince/article/details/109347296

版权

从前端小白到大佬 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高