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>
相关推荐
前端架构师-老李5 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡13 分钟前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户214965158987543 分钟前
从零搭建uniapp环境-记录
前端
努力写代码的熊大2 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER2 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh3 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒3 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐4 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖4 小时前
Webpack系列-Entry入口
前端·webpack
mustfeng4 小时前
VCS & Verdi 2023安装
java·服务器·前端