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;
相关推荐
LuckyLay1 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1681 小时前
aksk前端签名实现
java·前端·javascript
烛阴1 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw02 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦2 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明2 小时前
我与技术无缘,只想副业搞钱
前端
gzzeason2 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky3 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin3 小时前
前端八股-promise
前端·javascript
星语卿3 小时前
浏览器重绘与重排
前端·浏览器