相关文章
一、总结
1. 从以下几个方面作为Grid和Flex的区别：
指定线名称，网格，区域排版方向容器内容/项目s内容排版项目属性
2. 全文总结
Grid
- Grid在全局布局方面大胜，是元帅
- 网格=>二维布局，以布局为基础，布局自适应，多维联动厉害
- 独立源：可以设置区域及项目选择区域而与书写文档脱钩=>好维护
- 网格分层：z-index(可以看成3维)，脱离文档流
Flex
- Flex在局部布局方面大胜，是大将
- 弹性=>一维(多行1.5维)，以内容为基础，内容自适应，单行联动厉害
- order:半个独立源
- 排版方向或内容排版方面绝对的高手
- 弹性特点：没有方向，空间自由分配，自动对齐
3. 具体区分如下
指定线名称，网格，区域Grid:
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开始
grid-template-areas:指定区域
- 不同网格可以同名
- 有些区域不需要利用，则使用"点"（.）表示
grid-auto-rows/grid-auto-columns:剩余网格 行/列高
Flex:
无总结
Grid：拥有完整的网格布局属性(二维)，毕竟穷举法所以还拥有设置剩余网格行/列高
独立源：可以设置区域及项目选择区域而与书写文档脱钩=>好维护Flex：无，而是根据内容布局(弹性)
半个独立源：order ↓会介绍- =>
Grid在全局布局方面大胜，是元帅- ↓会介绍:
Grid在局部布局方面大胜，是大将
排版方向Grid:
grid-auto-flow:指定排版方向 释义:自动流，即设置流的方向
- row | column 先行后列（默认）| 先列后行
- row dense | column dense 某些项目指定位置以后，剩下的项目怎么自动放置
Grid因为很多都是要手动设置的，所以拥有对于其余没指定的属性来设置
grid-auto-rows/grid-auto-columns:剩余网格 行/列高grid-auto-flow:row dense | column dense 某些项目指定位置以后，剩下的项目怎么自动放置Flex:
flex-direction:指定排版方向
- row | column 先行后列（默认）| 先列后行
- row-reverse | column-reverse 反转
总结
排版方向Grid和Flex类似，但Flex稍胜一筹
容器内容/项目s内容排版Grid:
justify-content/align-content:指定容器内容排版
- start | end | center | stretch | space-around | space-between | space-evenly
justify-items/align-items:指定项目s内容排版 ：相对于该项目
- start | end | center | stretch
Flex:
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在起作用
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:
基本都是关于网格方面：指定项目所处线/区域
grid-row/grid-column:指定项目所处线
- 前row|column线1名称 / 后row|column线2名称
span关键字(表示跨越/占用几个网格): span 2/5 === 3/5 === 3/span 2
若没有指定线名称，则可以采用缺省线名称，number,从1开始
缺省：则由grid-auto-flow属性决定
grid-area:指定项目项目所处区域
- 区域名称
- 上线 / 右线 / 底线 / 左线 :逆时针，方便记忆
等同于 <row-start> / <column-start> / <row-end> / <column-end>
作用和grid-row/grid-column是一样的，优先级一样，书写顺序后面会覆盖Flex:
基本都是关于弹性方面：放大/缩小比例，伸缩基准值
flex-grow/flex-shrink:放大/缩小比例
- flex-grow：默认0，即如果存在剩余空间，也不放大
计算：item1/items * 剩余空间=item放大空间- flex-shrink：默认为1，即如果空间不足，该项目将缩小(弹性=>空间不够肯定要压缩)
计算：item1/items * 压缩空间=item缩小空间
flex-basis:伸缩基准值
- 默认值为auto
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
