css 流式布局

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      .box {
        width: 200px;
        height: 150px;
        background-color: black;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
      }

      .point {
        box-sizing: border-box;
        background-color: white;
        flex: 0 0 25%;
        height: 50px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
    </div>
  </body>
</html>
相关推荐
SUPER52664 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx184 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友7 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar7 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界9 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙9 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump10 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD10 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro10 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin11 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial