grid布局,flex布局实现类似响应式布局的效果

一. grid布局

实现代码

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /*自动填充,最小宽度300px*/
          justify-content: space-between;
          gap: 10px;
        }

        .item {
          background: pink;
          height: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
      <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>
</body>

</html>

效果图:

一. flex布局

实现代码

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box {
          display: flex;
          flex-wrap: wrap;
        }
        
        .item {
            flex: 1 0 300px; /*1 表示每个 div 元素会按比例占满可用空间,0 表示不允许缩小,300px 表示设置最小宽度为 300 像素 */
            min-width: 300px;
            background: pink;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <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>
</body>

</html>

效果图:

问题: flex布局对于最后一行的的子元素个数不足上一行的子元素个数时,它的子元素也会占满本行,导致最后一行的子元素宽度变大。

改进一下下: 添加空白元素,使得最后一行的元素与前面的元素同宽。

修改后的代码

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box {
          display: flex;
          flex-wrap: wrap;
        }
        
        .item {
            flex: 1 0 300px; /*1 表示每个 div 元素会按比例占满可用空间,0 表示不允许缩小,300px 表示设置最小宽度为 300 像素 */
            min-width: 300px;
            background: pink;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .h0{
            height: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <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>
        <!-- 空元素 (vue里面直接写 v-for="item in 4")-->
        <div class="item h0" ></div>
        <div class="item h0"></div>
    </div>
</body>

</html>

效果图:

相关推荐
两个西柚呀2 小时前
未在props中声明的属性
前端·javascript·vue.js
SteveJrong5 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~5 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
一个处女座的程序猿O(∩_∩)O6 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
还是大剑师兰特7 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生7 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569157 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
非凡ghost8 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost8 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost8 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端