Kaiven的个人博客

Appearance

弹性盒子与网格布局 ​

概念 ​

两者都是主流的布局方式，这里主要介绍弹性盒子，网格布局参见：https://blog.csdn.net/qq_18798149/article/details/133872183

案例出发，深入学习 ​

容器内两列布局，其中一列宽度固定，另一列自适应 ​

html
<!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>
        .box{
            display: flex;
            width: 100%;
            height: 100px;
        }
        .left {
            width: 200px;
            background-color: red;
        }
        .right{
            flex: 1;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

如果你仔细的观察会发现一个现象，当容器的宽度小于200px时，.left这个div也会自动的伸缩。

当然，你可以将 .left 的 width 改成 ”min-width“，这个问题就解决了。

不过，我们更想知道的是，为什么它会收缩。

关于 flex 属性 ​

它其实也是一个复合属性，可以接受三个参数值，分别代表：

flex-basis / flex-grow / flex-shrink。上述的示例中，我们只是定义了 ”flex:1“，这等价于 ”flex-basis:1“。

  • flex-basis

    定义了元素在主轴上的基准值，数值 / px / em / 百分比等都可以

  • flex-grow

    html
    <!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>
        .box{
            display: flex;
            width: 100%;
            height: 100px;
        }
        .left {
            width: 200px;
            background-color: red;
            flex-grow: 0;
        }
        .middle {
            width: 200px;
            background-color: green;
            flex-grow: 2;
        }
        .right{
            width: 200px;
            background-color: skyblue;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>

    原本三个子元素宽度占 600px，很明显无法撑满整个容器的宽度，flex-grow:0，代表不会”瓜分“剩余空间。.middle 和 .right 分别瓜分剩余空间的 2/3 和 1/3。

  • flex-shrink

    grow是增长因子的话，shrink就是缩减因子。

    html
    <!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>
        .box{
            display: flex;
            width: 100%;
            height: 100px;
        }
        .left {
            width: 300px;
            background-color: red;
            flex-shrink: 0;
        }
        .middle {
            width: 300px;
            background-color: green;
            flex-shrink: 1;
        }
        .right{
            width: 300px;
            background-color: skyblue;
            flex-shrink: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>

    当容器的宽度无法装下所有的子元素时，就会触发子元素收缩。flex-shrink:0 代表不收缩，.middle 和 .right 根据剩余容器宽度自行收缩。

圣杯布局 ​

html
<!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>
        .box {
            display: flex;
            width: 100%;
            height: 100px;
        }
        .left {
            width: 200px;
            flex-shrink: 0;
            background-color: red;
        }
        .right {
            width: 200px;
            flex-shrink: 0;
            background-color: red;
        }
        .middle {
            flex:1;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>

属性大全 ​

image-20250528120130471

image-20250528120154008

随便过一下，有个印象就行了。

不要满世界找钉子 ​

如果正常的文档流布局能够满足需求，那就不要啥时候都想到要用弹性盒子。对页面的整体布局，使用弹性盒子也是不太合适的，具体参加这个文章：https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/。

Date：2025/05/28

Author：kaiven