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>

效果图:

相关推荐
代码改变世界100863 小时前
像素策略游戏:资源战争
css·游戏·css3
angelQ4 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办4 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao4 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
高台树色4 小时前
终于记住Javascript垃圾回收机制
javascript
举个栗子dhy4 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
sorryhc4 小时前
开源的SSR框架都是怎么实现的?
前端·javascript·架构
fox_5 小时前
别再混淆 call/apply/bind 了!一篇讲透用法、场景与手写逻辑(二)
前端·javascript
潜心编码5 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
T___T5 小时前
从 "送花被拒" 到 "修成正果":用 JS 揭秘恋爱全流程中的对象与代理魔法
前端·javascript