DEV Community
·
CSS中的网格和弹性布局
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
Flexbox和网格布局是强大的布局方式，适用于不同的排列需求。Flexbox适用于单行或单列排列元素，特别适用于大小未知的元素或容器。网格布局适用于同时将元素排列成行和列，适合创建复杂布局。auto-fill和auto-fit关键字控制网格在容器中的行为。subgrid用于将网格项作为网格容器，并与父网格对齐。容器查询用于根据容器宽度进行响应式设计。
🎯
关键要点
- Flexbox和网格布局是强大的布局方式，适用于不同的排列需求。
- Flexbox适用于单行或单列排列元素，特别适用于大小未知的元素或容器。
- Flexbox非常适合水平和垂直对齐项目，常用于创建导航栏、侧边栏或工具栏。
- 网格布局适用于同时将元素排列成行和列，适合创建复杂布局。
- 网格布局可以处理行和列，适合构建复杂页面布局。
- repeat(3, minmax(200px, 1fr))语句创建三个行（或列），每个行的最小大小为200px，最大大小为1fr。
- auto-fill和auto-fit关键字控制网格在容器中的行为。
- auto-fill会创建尽可能多的100px列，如果有剩余空间，将均匀分配给列。
- auto-fit也会创建尽可能多的轨道，但会折叠空轨道。
- subgrid用于将网格项作为网格容器，并与父网格对齐，适用于嵌套网格。
- 容器查询根据容器宽度进行响应式设计，考虑容器的宽度而非视口宽度。
- 容器查询是响应式设计的补充，而不是媒体查询的替代品。
➡️
