当前位置: 首页 > news >正文

css错峰布局/瀑布流样式(类似于快手样式)

 

当样式一侧比较高的时候会自动换行,尽量保持高度大概一致,

例:

        一侧元素为5,另一侧元素为6

        当为5的一侧过于高的时候,可能会变为4/7分部dom节点 

如果不需要这样的话删除样式  flex-flow:column wrap;

 设置父级dom样式
 column-count: 2;  //一行多少个元素column-gap: 10px;  //元素之间的间隔flex-flow:column wrap;
其中flex-flow:column wrap;意思是:

合了flex-directionflex-wrap两个属性。具体来说,flex-flow:column wrap等价于设置flex-direction:columnflex-wrap:wrap

  • flex-direction‌:这表示主轴的方向为垂直方向,子元素从上到下排列。
  • flex-wrap‌:这表示如果子元素在一行中排列不下,将会进行换行处理。

通过使用flex-flow:column wrap,你可以方便地同时设置主轴方向和换行方式,而不需要分别设置这两个属性。这种简写方式在处理复杂的布局时非常有用,可以减少代码量并提高可读性。

设置子元素样式
break-inside:avoid;

用于指定元素内部是否允许发生页面、栏目或区域的分隔。避免在该元素内部发生分页或分列

http://www.lryc.cn/news/548041.html

相关文章:

  • 【并发编程】聊聊定时任务ScheduledThreadPool的实现原理和源码解析
  • 【虚拟化】Docker Desktop 架构简介
  • DeepSeek 医疗大模型微调实战讨论版(第一部分)
  • c++实现最大公因数和最小公倍数
  • 知识库Dify和cherry无法解析影印pdf word解决方案
  • 【记录一下学习】Embedding 与向量数据库
  • 【第21节】C++设计模式(行为模式)-Chain of Responsibility(责任链)模式
  • createrepo centos通过nginx搭建本地源
  • 在 Docker 中搭建GBase 8s主备集群环境
  • 【MySQL-数据类型】数据类型分类+数值类型+文本、二进制类型+String类型
  • 小谈java内存马
  • 简单的二元语言模型bigram实现
  • 【清华大学】实用DeepSeek赋能家庭教育 56页PDF文档完整版
  • 黑洞如何阻止光子逃逸
  • 1.4 单元测试与热部署
  • window系统中的start命令详解
  • AI编程工具节选
  • 正则表达式,idea,插件anyrule
  • 原生iOS集成react-native (react-native 0.65+)
  • java错题总结
  • 【商城实战(10)】解锁商品信息录入与展示的技术密码
  • 2025年主流原型工具测评:墨刀、Axure、Figma、Sketch
  • MDM 如何彻底改变医疗设备的远程管理
  • OpenCV计算摄影学(18)平滑图像中的纹理区域同时保留边缘信息函数textureFlattening()
  • 用DeepSeek学Android开发:Android初学者遇到的常见问题有哪些?如何解决?
  • springboot 集成 MongoDB 基础篇
  • 大白话html语义化标签优势与应用场景
  • 恶劣天候三维目标检测论文列表整理
  • conda的环境起的jupyter用不了已经安装的包如何解决
  • 蓝桥杯题型