css3多列布局

css3多列布局

colmns属性

  • columns属性是一个简写属性
    • column-count属性:定义列的数量或者允许的最大列数
      • auto 为默认值,用于表示列的数量由其他css属性决定
      • number 必须是正整数,用于定义列数量
    • column-width属性:定义列的宽度
      • auto 为默认值,用于表示列的数量由其他css属性决定
      • lenght 必须是正整数,用于定义列的宽度

column-gap属性

column-gap属性定义用columns属性设置的列后的间距

column-gap

  • normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em
  • length 必须是正整数,把列间的间隔设置为指定的长度

column-rule属性

column-rule属性 用于定义列与列之间的边框属性,其中包括边框的宽度、边框颜色以及边框样式

  • column-rule-width 设置边框的宽度
  • column-rule-style 设置边框线条的样式
  • column-rule-color 设置边框的颜色

注意:只是间隙中的边框,并不是围绕上下左右

column-span 横跨多列属性

column-span属性用于定义一个列元素是否跨列

  • none:用于表示元素不跨列
  • all 用于表示元素跨所有列
  • 1 用于表示元素跨一列

column-fill 列的填充属性

column-fill属性用于定义列的宽度是由内容决定,还是统一高度

  • auto 默认值,用于表示列的高度由内容决定
  • balance 用于表示列的高度根据内容最多的一列为准

瀑布流断裂问题

css 复制代码
break-inside:aviod;
相关推荐
视频砖家19 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj16899744 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机5 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人5 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密