css中的表格布局,弹性布局和网格布局

display:table;

常见的容器属性
  • display:table=>相当于“table”标签;
常见的项目属性
  • display:table-row=>相当于“tr”标签;
  • display:table-cell=>相当于“td”标签

display: table时padding会失效
display: table-row时margin、padding同时失效
display: table-cell时margin会失效

display:flex;

常见的容器属性
  1. flex-direction决定项目是水平排列还是垂直排列
    • row 水平排列
    • row-reverse 水平反向排列
    • column 垂直排列
    • column-reverse 垂直反向排列
  2. flex-wrap 决定项目如果一行排列不下以什么方式展示
    • nowrap 不换行
    • wrap 换行
    • wrap-reverse; 宽度不足换行显示,从下往上开始
  3. flex-flow
    • flex-flow属性是flex-direction和flex-wrap的缩写,表示flex布局的flow流动特性
  4. justify-content 项目在主轴上的对齐方式
    • flex-start 开始位置
    • flex-end 结束位置
    • center 中间
    • space-between 两端对齐,项目之间的间隔都相等
    • space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
  5. align-items 项目在交叉轴(侧轴)上的对齐方式
    • flex-start 伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;
    • flex-end 伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;
    • center 伸缩项目的外边距盒 在该行的侧轴上居中放置;
  6. align-content (行与行之间的对齐方式) 定义多个伸缩行的对齐方式; 没有换行就不存在多行的情况。
常见的项目属性
  1. order 排序方式,数字越小就越在前面
  2. flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  3. flex-shrink 定义了项目的缩小比例,默认为1
  4. flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间
  5. flex 是flex-grow、flex-shrink和flex-basis三属性的简写总和
  6. align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

项目属性中常用的flex:1表示平分
align-self表示单独定义项目的布局方式

display:grid

常见的容器属性
  1. display:grid定义一个容器属性为网格布局
  2. grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px
  3. grid-template-columns: repeat(3, 1fr)表示创建三列,每列平均分配
  4. grid-template-columns: 150px 100px 50px 1fr;表示创建四列,最后一列占全部剩余的位置
  5. grid-template-rows: 50px 50px表示创建两行,每行的高度是50px
  6. 行其他的也可以跟列一样的
  7. grid-gap: 1px;表示每个项目之间的间隙
常见的项目属性
  1. grid-column-start: 1;表示该项目所开始的位置(从最左边开始)
  2. grid-column-end: 4;表示该项目所结束的位置
  3. 上面1和2的简写可以是grid-column: 1 / 4;
  4. grid-row-start: 2;类似上面的列的处理一样的
  5. grid-row-end: 4;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,529评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,649评论 0 26
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,192评论 0 59
  • CSS很简单也很常用,但是经常有一些相似的属性让人傻傻分不清楚,今天列举一下自己经常分不清楚的一些属性。(使用简单...
    tiancai啊呆阅读 520评论 0 1
  • 意象”是中国古典美学形象范畴的审美概念,是中国传统文艺美学核心理论,“意”指心意,“象” 指物象。“意象”是意中之...
    陈野思逸阅读 2,378评论 0 0