flex 实现多行项目动态堆叠,随着屏幕尺寸而扩展减少

当您增加或减少屏幕尺寸时,这些 flex 项目会缩小和增长。

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>
    .parent {
      display: flex;
      flex-wrap: wrap;
    }

    .parent {
      width: 100%;
      height: 100%;
    }
    .box {
      font-size: 2rem;
      padding: 1rem;
      display: grid;
      place-items: center;
      border-radius: 1rem;
      border-style: dashed;
    }
    .box {
      flex: 1 1 150px;
      flex: 0 1 150px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="ex-container" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
    <div class="" style="
      box-sizing: border-box;
      width: 90%;
      height: 100%;
      padding: 20px;
    ">
      <div class="parent white">
        <div class="box green">1</div>
        <div class="box green">2</div>
        <div class="box green">3</div>
        <div class="box green">4</div>
        <div class="box green">5</div>
      </div>
    </div>
  </div>
</body>
</html>

实现效果

相关推荐
代码的余温3 小时前
CSS3文本阴影特效全攻略
前端·css·css3
每天开心4 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
3Katrina8 小时前
我仿造了一个掘金App的首页...
前端·css
伍哥的传说21 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
结城1 天前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..1 天前
网络安全第三次作业
前端·css·html
小白阿龙1 天前
如何实现缓存音频功能(App端详解)
前端·css·html5
smile boy1 天前
个人财务记录应用
前端·javascript·css·css3·html5
FogLetter2 天前
从零复刻网易云音乐年度总结H5:技术细节与用户体验的完美结合
前端·css
前端老鹰2 天前
CSS mask-image:给元素 “戴” 上创意面具的隐藏技巧
前端·css