flex实现二维布局

努力的白熊

已于 2024-05-12 17:27:16 修改

阅读量77

点赞数

文章标签： html5 css3

于 2023-06-15 09:34:09 首次发布

本文链接：https://blog.csdn.net/m0_62323931/article/details/131220795

版权

很多人使用flex，都发现了一个问题，flex对二维布局似乎并不友好，在二维布局更多人选择griad,flex则更多的在一维布局中使用
上代码：
方法一：

<style>
    #df {
        display: flex;
        flex-wrap: wrap;
    }
    
    .obj {
        border: 1px solid red;
        width: calc(100% / 3); /* 将宽度设置为容器宽度的三分之一 */
        height: 30px;
        box-sizing: border-box; /* 在宽度计算中包含边框 */
    }
</style>

<body>
       <div id='df'>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
            <div class='obj'></div>
        </div>

</body>

效果展示：

这里我们改为多行三列布局，其实只需要修改widt中的宽度计算方式，即可修改为4,5,6...列布局

方法二：

   #df {
        display: flex;
        flex-wrap: wrap;
    }
    
    .obj {
        border: 1px solid red;
        flex-basis: calc(100% / 3); /* 将基础宽度设置为容器宽度的三分之一 */
        height: 30px;
        box-sizing: border-box; /* 在宽度计算中包含边框 */
        flex-grow:1;
        flex-shrink: 1;
    }

这里改用flex-basis: calc(100% / 3);不给div直接设置宽度，而是使用flex-basis设置基础宽度
这里给大家复习一下flex相关属性：

flex-basis 控制了弹性项目在主轴上的初始大小。换句话说，它决定了弹性项目在未进行伸缩调整前的宽度（如果主轴是水平方向）或高度（如果主轴是垂直方向）。

通过设置 flex-basis 属性，我们可以指定每个弹性项目在主轴上的初始大小。然后，剩余的空间将根据 flex-grow 和 flex-shrink 属性的设置进行分配或收缩。

例如，如果将 flex-basis 设置为 200px，则弹性项目的初始宽度（或高度）将为 200px。然后，根据容器的剩余空间和其他弹性项目的设置，它们的大小可能会调整以适应容器。

flex-grow: 1 表示该项目可以在需要时按比例扩展，以填充剩余的空间。
flex-shrink: 1 表示该项目可以在需要时按比例收缩，以适应容器较小的空间。

两种方法对比

第一种方法（使用固定的 width）适用于希望每个 .obj 元素在容器内具有相等的固定宽度的情况。通过设置 width: calc(100% / 3)，每个 .obj 元素将被设置为容器宽度的三分之一，确保每行显示三个元素。这种方法简单直接，适用于需要固定宽度的场景。

第二种方法（使用 flex-basis 和弹性属性）更适用于希望 .obj 元素根据容器的可用空间自动调整大小的情况。通过设置 flex-basis: calc(100% / 3)，每个 .obj 元素将具有相等的基础宽度，但其实际大小将取决于容器的剩余空间以及其他弹性项目的设置。使用 flex-grow: 1 和 flex-shrink: 1，元素可以根据需要扩展或收缩，以填充容器的剩余空间或适应较小的空间。这种方法更加灵活，适用于需要自适应宽度的场景。

因此，我们可以根据您的具体需求选择适合的方法。如果希望 .obj 元素具有固定的宽度，使用第一种方法；如果希望它们根据容器的可用空间自动调整大小，使用第二种方法。