弹性布局中的 flex 到底如何影响布局？

本文链接：https://blog.csdn.net/m0_66970349/article/details/140643253

1.flex:1

做手机端项目时，我们经常遇到flex弹性布局，使用flex:1的作用是让项目能够自动填充剩余空间，实现自适应布局,本篇讲解一下子盒子 flex属性的具体含义，方便我们做项目时，灵活设置以便达到想要的效果

flex 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

flex:1是flex-grow:1,flex-shrink:1,flex-basis:0%的缩写。

2.flex-grow

flex-grow 项在 flex 容器中分配剩余空间的相对比例,剩余空间是 flex 容器的大小减去所有 flex 项加起来的大小

默认值：0

例：

<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>理解 flex</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        display: flex;
        width: 800px;
        height: 100px;
        margin: 100px auto;
        border: 1px solid #333;
        color:#fff;
        font-size: 200%;
    }
    .wrapper div {
        /* 给每个子 盒子一个宽度 100px */
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100%;
    }
    /* 分别设置不同的flex-grow值 */
     .one {
        flex-grow:1;
        background-color: #ee8d8d;
    }
    .two {
        flex-grow:2;
        background-color: #e6ee8d;
    }
    .three {
        flex-grow:3;
        background-color: #97d4eb;
    }
    .four {
        flex-grow:4;
        background-color: #a5ea92;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="one">One</div>
        <div class="two">Two</div>
        <div class="three">Three</div>
        <div class="four">Four</div>
    </div>
  
</body>
</html>

如图：

3.flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

默认值：1（说明默认flex布局超出会自动收缩，来适应父盒子大小）

例：

.wrapper div {
        /* 给每个 子盒子 一个宽度 300px */
        width: 300px;
        height: 100px;
        text-align: center;
        line-height: 100%;
    }
    /* 分别设置不同的flex-shrink值 */
     .one {
        flex-shrink: 1;
        background-color: #ee8d8d;
    }
    .two {
        flex-shrink: 2;
        background-color: #e6ee8d;
    }
    .three {
        flex-shrink: 3;
        background-color: #97d4eb;
    }
    .four {
        flex-shrink: 4;
        background-color: #a5ea92;
    }

如图：

4.flex-basis

flex-basis 指定了 flex 元素在主轴方向上的初始大小

默认值：auto，即项目本身的大小
取值：width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数。负值是不被允许的。
备注：当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。通俗的说，会干掉自身的width，使其设置失效

例：

.wrapper div {
        height: 100px;
        text-align: center;
        line-height: 100%;
    }
    /* 分别设置不同的flex-basis值 */
     .one {
        /* 设置具体宽度 */
        flex-basis:100px;
        background-color: #ee8d8d;
    }
    .two {
        flex-basis:200px;
        background-color: #e6ee8d;
    }
    .three {
        /* 设置 百分比 */
        flex-basis:50%;
        background-color: #97d4eb;
    }
    .four {
        /* 不设置或设置 flex-basis:auto，盒子本身宽度 */
        flex-basis: auto;
        background-color: #a5ea92;
    }

如图：

5.取值

通过设置 flex 属性的值或关键字来熟悉各个分属性的作用

1.flex:n (n为数字)

<!DOCTYPE html>
<html lang=“zh-CN”>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>理解 flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
            width: 800px;
            height: 100px;
            margin: 100px auto;
            border: 1px solid #333;
            font-size: 200%;
        }

        .wrapper div {
            /* 同时设置flex:n（数字）,width会失效 */
            flex: 1;
            width: 120px;
            height: 100px;
            text-align: center;
            line-height: 100%;
            background-color: #dbebad;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>       
        <div>8</div>       
    </div>
</body>

</html>

2.flex:initial

3.flex：none

4.flex:auto

5.总结

flex: initial : 相当于 flex:0 1 auto，表示项目会缩短适应容器，但不会伸长。

flex: none：相当于 flex: 0 0 auto，表示项目不会伸缩，保持原始大小。

flex: auto：相当于 flex: 1 1 auto，表示项目会根据自身大小和剩余空间进行伸缩。

flex: n（n为正整数）：相当于 flex: n 1 0%，表示项目的放大比例为n，其他值默认。

更多flex 的信息可以参考官网MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex