Flex 和 Grid 布局学习教程：彻底掌握栅格排版技能

2023-10-21 08:07:22

Flex 和 Grid 布局：掌控网页布局的利器

什么是 Flex 布局？

Flex 布局是一种 CSS 布局模型，它允许你沿水平或垂直方向排列元素，并控制它们的大小和对齐方式。它非常适合创建导航栏、侧边栏和页脚等一维布局。

Flex 布局的基本属性

flex-direction: 设置元素在主轴（即排列方向）上的排列方式，可以取值为 row（水平排列）、row-reverse（水平反向排列）、column（垂直排列）、column-reverse（垂直反向排列）。
flex-wrap: 设置元素是否换行，可以取值为 nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。
flex-flow: 同时设置 flex-direction 和 flex-wrap，方便简洁地定义排列方式。
justify-content: 设置元素在主轴上的对齐方式，可以取值为 flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，中间元素间隔均匀）、space-around（两端和中间都间隔均匀）。
align-items: 设置元素在副轴（即与主轴垂直的方向）上的对齐方式，可以取值为 flex-start（顶部对齐）、flex-end（底部对齐）、center（垂直居中对齐）、baseline（沿基线对齐，适用于文本元素）、stretch（拉伸至副轴两端）。
align-content: 设置多行元素在副轴上的对齐方式，类似于 justify-content 但适用于多行。

Flex 布局用法示例

<div style="display: flex; justify-content: center;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

此代码创建一个水平排列的 Flex 布局，其中子元素居中对齐。

什么是 Grid 布局？

Grid 布局是一种二维 CSS 布局模型，它允许你在水平和垂直方向上排列元素，并控制它们的大小、位置和对齐方式。它非常适合创建复杂、响应式的布局，如仪表盘、表格和画廊。

Grid 布局的基本属性

grid-template-columns: 定义列的宽度，可以取值为 auto（自动调整）、<length>（指定长度）和 <percentage>（指定百分比）。
grid-template-rows: 定义行的宽度，与 grid-template-columns 类似。
grid-gap: 设置单元之间的间距，可以取值为 <length> 和 <percentage>。
grid-auto-flow: 设置单元的排列方式，可以取值为 row（按行排列）、column（按列排列）、dense（尽可能紧凑排列）。
justify-content: 与 Flex 布局中的同名属性相同，设置单元在主轴上的对齐方式。
align-items: 与 Flex 布局中的同名属性相同，设置单元在副轴上的对齐方式。
align-content: 与 Flex 布局中的同名属性相同，设置多行单元在副轴上的对齐方式。

Grid 布局用法示例

<div style="display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; justify-content: center; align-items: center;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

此代码创建一个 2 行 3 列的 Grid 布局，其中子元素在水平和垂直方向上居中对齐。

Flex 布局与 Grid 布局的比较

特征	Flex 布局	Grid 布局
维度	一维	二维
适用性	简单一维布局	复杂、响应式布局
优点	简单易用、学习曲线短、实现响应式布局容易	支持二维布局、支持复杂布局、实现响应式布局容易
缺点	不支持二维布局、不支持复杂布局	学习曲线较长、使用起来不如 Flex 布局简单易用