grid

https://cssgridgarden.com/#zh-cn 26-28

图解CSS: Grid布局（Part1）

grid-template-columns: 指定网格一列或多列列宽

grid-template-rows: 指定网格一行或多行行高

grid-column: 指定网格项在网格容器中的列位置和跨度

组成

• 网格轴
  • grid-auto-flow
  • 列轴/块轴：方向和列轨道是一致，垂直方向，从上倒下
  • 行轴/内联轴：方向和行轨道是一致，水平方向，从左到右
• 网格沟槽/间距
• 网格线
• 网格单元
• 网格轨道：任意两条相邻网格线之间的空间
  • 行
  • 列
• 网格区域：由一个或多个相邻的网格单元格组成它主要是用来放置一个或多个网格项目的逻辑空间
• 显式网格：显式定义的行和列形成显式网格。
  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
• 隐士网格：如果内容超出显式定义的网格，会创建隐式网格轨道。
  • grid-auto-rows
  • grid-auto-columns
• 嵌套网格（nest）
  • 网格线，网格轨道等独立
  • inherit: 继承这个属性值
• 子网格（sub）
  • 只有当网格项跨越多个网格单元时，子网格 subgrid 才有意义
  • 继承父网格的轨道，网格线，不受 box-sizing 影响
  • 需要写 grid-area 框定范围

作用于网格容器

• grid-auto-rows
• grid-auto-columns
• grid-auto-flow
• grid-template-rows
• grid-template-columns
• grid-template
• grid-template-areas

作用于网格单元

• grid-row
  • grid-row-start
  • grid-row-end
• grid-column
  • grid-column-start
  • grid-column-end
• grid-area
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

flex

https://flexboxfroggy.com/#zh-cn 24

主轴排列，交叉轴对齐

just: 使齐行；调整使全行排满；使每行排齐 主轴

align: 使一致；排列；校准；(尤指) 使成一条直线；排整齐 交叉轴

content: 内容项之间和周围分配空间

items: 对齐方式 格子内如何对齐

self: 覆盖 items

flex vs grid

如何选择