Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

    • flex

      • 语法
      • flex-一行显示固定数量
        • flex-一行显示固定数量
      • flex常见布局
    • Scss

    • CSS常见问题

    • less

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • CSS
  • flex
HiuZing
2022-11-04
目录

flex-一行显示固定数量

# flex-一行显示固定数量

---css 代码
.exam-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .exam-item {
      flex: 1;
      height: 140px;
      text-align: center;
      margin: 0 20px 20px 0; // 间隙为20px
      padding-top: 20px; 
      border: 1px solid #888;
      box-sizing: border-box;
      
      width: calc((100% - 60px) / 4);   // 我这里一行显示4个 所以是/4  一行显示几个就除以几 
      // 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 60px) / 4);
      max-width: calc((100% - 60px) / 4);
      
      &:nth-child(4n + 4) {
        margin-right: 0;
      }  
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
上次更新: 2024/08/14, 04:14:33
语法
flex常见布局

← 语法 flex常见布局→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式