乐趣区

关于css:弹性盒布局之从左往右空间不够换行继续从左往右从左往右从上往下

jiezi

本文记录一个 css 小技巧，不难，不过可能本人一时间想不到

问题形容

咱们有这样的需要，大容器中有很多的盒子，从左往右排列，空间不够的话，而后换行，持续从左往右排列，如下效果图

看到这样的需要，咱们第一工夫想到的就是弹性盒布局，给大容器开启弹性盒、容许换行，两侧散布，于是会写下如下代码：

display: flex;
flex-wrap: wrap;
justify-content: space-between;

如果是正好 9 个项，那这种写法没有问题，如果是 8 个项，最初一行的 7 和 8 就会两侧散布了，如下图：

这种成果必定不行啊，那怎么办呢？

解决方案一 应用实在 DOM 进行填充，而后再暗藏这个 DOM

  • 咱们再创立一个 dom 元素项，作为最初一个 9
  • 而后把第 9 项的高度置为 0，只保留宽度
  • 或者再加点透明度为 0 障眼法使其看不到即可

代码如下（复制粘贴应用）：

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        .wrap {
            width: 480px;
            height: 360px;
            border: 4px solid #000;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 6px;
            /* 开启弹性盒，换行，两端散布 */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .item {
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border: 2px solid pink;
            font-weight: 700;
            font-size: 24px;
            margin-bottom: 8px;
            /* 留神是 border-box 盒模型 */
            box-sizing: border-box;
        }

        /* 障眼法占位项 */
        .fakeItem {
            width: 120px;
            height: 0;
            border: 2px solid green;
            box-sizing: border-box;
            opacity: 0;
            /* visibility: hidden; */
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
    <script>
        /**
         * 通过 js 增加一个假的项，即为占位项
         * 占位项的高度为 0，宽度和其余项宽度一样
         * 也可加透明度为 0，或者 visibility 都行的
         * 只有障眼法看不到即可
         * */
        let wrap = document.querySelector('.wrap')
        let divDom = document.createElement('div')
        divDom.classList.add('fakeItem')
        wrap.appendChild(divDom)
    </script>
</body>

</html>

这样就实现了，本文中的第一个效果图

解决方案二 应用伪元素在最初地位进行填充

创立 dom，渲染 dom 有些消耗性能（实际上肉眼看不出区别的），那咱们就不创立 dom 呗，间接应用伪元素模仿一个实在的 dom，思路基本一致的，于是，咱们就有了以下“优化”代码 

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        .wrap {
            width: 480px;
            height: 360px;
            border: 4px solid #000;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 6px;
            /* 开启弹性盒，换行，两端散布 */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        /* 解决最初一行不从左往右排布问题 */
        .wrap::after {
            content: "";
            height: 0;
            /* 和内容项的宽度保持一致 */
            width: 120px;
        }

        .item {
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border: 2px solid pink;
            font-weight: 700;
            font-size: 24px;
            margin-bottom: 8px;
            /* 留神是 border-box 盒模型 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <!-- <div class="item">9</div> -->
    </div>
</body>

</html>

拓展栅格布局也是一种思路

另外也能够应用栅格布局的形式进行尝试

栅格布局十分弱小哦！！！

拓展思路代码 

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <style>
        .grid-box {
            display: grid;
            grid-template-columns: auto auto auto;
            border: 1px solid #333;
        }

        .grid-box-item {
            font-size: 30px;
            text-align: center;
            padding: 12px;
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
        }

        .grid-box-item:last-child {border-bottom: none;}

        .grid-box-item:nth-last-child(2) {border-bottom: none;}

        .grid-box-item:nth-child(3n) {border-right: none;}
    </style>
</head>

<body>
    <div class="grid-box">
        <div class="grid-box-item">1</div>
        <div class="grid-box-item">2</div>
        <div class="grid-box-item">3</div>
        <div class="grid-box-item">4</div>
        <div class="grid-box-item">5</div>
        <div class="grid-box-item">6</div>
        <div class="grid-box-item">7</div>
        <div class="grid-box-item">8</div>
    </div>
</body>

</html>
退出移动版