Grid和Flex对比总结

相关文章

• 常用布局【类】整理

一、总结

1. 从以下几个方面作为Grid和Flex的区别：

• 指定线名称，网格，区域
• 排版方向
• 容器内容/项目s内容排版
• 项目属性

2. 全文总结

• Grid

• Grid在全局布局方面大胜，是元帅
• 网格=>二维布局，以布局为基础，布局自适应，多维联动厉害
• 独立源：可以设置区域及项目选择区域而与书写文档脱钩=>好维护
• 网格分层：z-index(可以看成3维)，脱离文档流

• Flex

• Flex在局部布局方面大胜，是大将
• 弹性=>一维(多行1.5维)，以内容为基础，内容自适应，单行联动厉害
• order:半个独立源
• 排版方向或内容排版方面绝对的高手
• 弹性特点：没有方向，空间自由分配，自动对齐

3. 具体区分如下

• 指定线名称，网格，区域

Grid:

1. grid-template-rows/grid-template-columns:指定线名称，网格

• [线1] 值1|auto|Nfr|minmax(100px, 1fr) [线2] ....
• repeat(N|auto-fill，值1[ 值2 [值3...])
• 允许同一根线有多个名字 [线1 线11 ...]
• 若没有指定线名称，则缺省为number，从1开始

2. grid-template-areas:指定区域

• 不同网格可以同名
• 有些区域不需要利用，则使用"点"（.）表示

2. grid-auto-rows/grid-auto-columns:剩余网格 行/列高

---

Flex:
无

总结

• Grid：拥有完整的网格布局属性(二维)，毕竟穷举法所以还拥有设置剩余网格行/列高
  独立源：可以设置区域及项目选择区域而与书写文档脱钩=>好维护
• Flex：无，而是根据内容布局(弹性)
  半个独立源：order ↓会介绍
• =>Grid在全局布局方面大胜，是元帅
• ↓会介绍:Grid在局部布局方面大胜，是大将

---

---

• 排版方向

Grid:

1. grid-auto-flow:指定排版方向 释义:自动流，即设置流的方向

• row | column 先行后列（默认）| 先列后行
• row dense | column dense 某些项目指定位置以后，剩下的项目怎么自动放置

---

Grid因为很多都是要手动设置的，所以拥有对于其余没指定的属性来设置

• grid-auto-rows/grid-auto-columns:剩余网格 行/列高
• grid-auto-flow:row dense | column dense 某些项目指定位置以后，剩下的项目怎么自动放置

Flex:

1. flex-direction:指定排版方向

• row | column 先行后列（默认）| 先列后行
• row-reverse | column-reverse 反转

总结

• 排版方向Grid和Flex类似，但Flex稍胜一筹

---

---

• 容器内容/项目s内容排版

Grid:

1. justify-content/align-content:指定容器内容排版

• start | end | center | stretch | space-around | space-between | space-evenly

2. justify-items/align-items:指定项目s内容排版 ：相对于该项目

• start | end | center | stretch

Flex:

1. justify-content/align-content:指定容器内容排版

• justify-content：flex-start | flex-end | center | space-between | space-around
• align-content：flex-start | flex-end | center | space-between | space-around | stretch
• align-content只对多行时生效；一行时失效，效果上面是align-items在起作用

2. align-items:指定项目s内容排版 ：相对于该行

• flex-start | flex-end | center | baseline | stretch

总结

• Grid是网格，较为稳健，所以具有完整的属性
  但项目s内容排版：是相对于该项目，较为孤立，项目s内容联动排版无
• Flex是弹性，所以无justify-items属性，单行时align-items在生效所以align-content无效
  但项目s内容排版：是相对于该行，有很好的联动
• => 容器内容/项目s内容排版Grid和Flex类似，但Flex稍胜一筹

---

---

• 项目属性

Grid:基本都是关于网格方面：指定项目所处线/区域

1. grid-row/grid-column:指定项目所处线

• 前row|column线1名称 / 后row|column线2名称
• span关键字(表示跨越/占用几个网格): span 2/5 === 3/5 === 3/span 2
  若没有指定线名称，则可以采用缺省线名称，number,从1开始
  缺省：则由grid-auto-flow属性决定

2. grid-area:指定项目项目所处区域

• 区域名称
• 上线 / 右线 / 底线 / 左线 :逆时针，方便记忆
  等同于 / / /
  作用和grid-row/grid-column是一样的，优先级一样，书写顺序后面会覆盖

Flex:基本都是关于弹性方面：放大/缩小比例，伸缩基准值

1. flex-grow/flex-shrink:放大/缩小比例

• flex-grow：默认0，即如果存在剩余空间，也不放大
  计算：item1/items * 剩余空间=item放大空间
• flex-shrink：默认为1，即如果空间不足，该项目将缩小(弹性=>空间不够肯定要压缩)
  计算：item1/items * 压缩空间=item缩小空间

2. flex-basis:伸缩基准值

• 默认值为auto

3. flex:是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

• 即默认值为0 1 auto ，即不放大，平均缩小
• auto:对应 (1 1 auto)，即平均放大，平均缩小
• none :对应 (0 0 auto)，即不放大，不缩小。若项目flex都设置none，则会溢出

相似属性

• z-index:多个项目所处区域有交集，可以设置层级
  Grid一大特点：网格分层
• order:定义项目的排列顺序，默认值为0，值和z-index一样。可以为负数
  Flex弹性布局，逊色于Grid的文档独立流

共同属性

• justify-self / align-self:设置该项目内容私有排版
  但Flex没有justify-self，原因嘛，还是因为内容弹性嘛 (^ _ ^)
  值：等同于justify-items / align-items值:start | end | center | stretch