CSS布局教程：Flexbox与Grid实战

CSS 布局教程：Flexbox 与 Grid 实战

在 Web 开发的世界里，CSS 布局一直扮演着至关重要的角色。它决定了网页元素如何在页面上排列、对齐和分布，直接影响着用户体验和网站的整体美观。在过去，我们依赖于 float、position 和 table 等传统布局技术，但这些方法往往存在局限性，难以应对复杂多变的布局需求。

幸运的是，CSS 引入了两种强大的现代布局模块：Flexbox（弹性盒子布局） 和 Grid（网格布局）。它们提供了前所未有的灵活性和控制力，让我们能够轻松创建各种响应式、自适应的布局，告别繁琐的 hack 和变通方法。

本文将深入探讨 Flexbox 和 Grid 的核心概念、属性和实战应用，并通过丰富的示例代码帮助你彻底掌握这两种布局技术。

一、Flexbox：一维布局的王者

Flexbox 是一种一维布局模型，非常适合用于沿着单个轴线（水平或垂直）排列项目。它可以轻松实现项目的对齐、分布、排序和空间调整，特别适用于导航栏、卡片列表、按钮组等组件的布局。

1.1 核心概念

• Flex 容器（Flex Container）：应用了 display: flex 或 display: inline-flex 的元素。它成为 Flex 项目的父容器，控制着项目的布局行为。
• Flex 项目（Flex Item）：Flex 容器的直接子元素。它们会按照 Flexbox 的规则进行排列和布局。
• 主轴（Main Axis）：Flex 项目排列的方向。默认是水平方向（从左到右），可以通过 flex-direction 属性改变。
• 交叉轴（Cross Axis）：与主轴垂直的轴线。

1.2 容器属性（应用于 Flex 容器）

• display：

  • flex：将元素设置为块级 Flex 容器。
  • inline-flex：将元素设置为行内级 Flex 容器。

• flex-direction：定义主轴的方向。

  • row（默认值）：水平方向，从左到右。
  • row-reverse：水平方向，从右到左。
  • column：垂直方向，从上到下。
  • column-reverse：垂直方向，从下到上。

• flex-wrap：控制 Flex 项目是否换行。

  • nowrap（默认值）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

• flex-flow：flex-direction 和 flex-wrap 的简写属性。

  • 例如：flex-flow: row wrap;

• justify-content：定义 Flex 项目在主轴上的对齐方式。

  • flex-start（默认值）：左对齐（或顶部对齐）。
  • flex-end：右对齐（或底部对齐）。
  • center：居中对齐。
  • space-between：两端对齐，项目之间的间隔相等。
  • space-around：每个项目两侧的间隔相等。
  • space-evenly：项目之间以及项目与容器边缘的间隔相等。

• align-items：定义 Flex 项目在交叉轴上的对齐方式。

  • stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：垂直居中对齐。
  • baseline：项目的第一行文字的基线对齐。

• align-content：定义多行 Flex 项目在交叉轴上的对齐方式（只有在有多行项目时才生效）。

  • stretch（默认值）：占满整个交叉轴。
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。

1.3 项目属性（应用于 Flex 项目）

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

• flex-grow：定义项目的放大比例，默认为 0（即如果存在剩余空间，也不放大）。

  • 如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。
  • 如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink：定义项目的缩小比例，默认为 1（即如果空间不足，该项目将缩小）。

  • 如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。
  • 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

• flex-basis：定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

• flex：flex-grow、flex-shrink 和 flex-basis 的简写属性。

  • 默认值为 0 1 auto。
  • 常用值：
    • flex: 1; 等同于 flex: 1 1 0%;
    • flex: auto; 等同于 flex: 1 1 auto;
    • flex: none; 等同于 flex: 0 0 auto;

• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

  • 默认值为 auto，表示继承父元素的 align-items 属性。
  • 其他取值与 align-items 相同。

1.4 实战案例

案例 1：水平导航栏

```html

• Home
• About
• Services
• Contact

```

案例 2：三栏布局（中间自适应）

```html

```

二、Grid：二维布局的霸主

Grid 是一种二维布局模型，可以将页面划分为行和列，形成网格结构。它提供了强大的控制力，可以精确地定位和对齐项目，非常适合用于复杂的页面布局，如杂志布局、仪表盘、图片墙等。

2.1 核心概念

• 网格容器（Grid Container）：应用了 display: grid 或 display: inline-grid 的元素。
• 网格项目（Grid Item）：网格容器的直接子元素。
• 网格线（Grid Line）：构成网格结构的分界线。可以是水平的或垂直的。
• 网格轨道（Grid Track）：两条相邻网格线之间的空间。可以理解为网格的行或列。
• 网格单元格（Grid Cell）：网格中单个的单元。
• 网格区域（Grid Area）：由一个或多个网格单元格组成的矩形区域。

2.2 容器属性（应用于 Grid 容器）

• display：

  • grid：将元素设置为块级网格容器。
  • inline-grid：将元素设置为行内级网格容器。

• grid-template-columns：定义每一列的列宽。

  • 可以使用固定值（如 100px）、百分比（如 20%）、fr 单位（分配剩余空间）、auto（由内容决定）等。
  • repeat() 函数：简化重复的值。例如：grid-template-columns: repeat(3, 1fr); 表示三列等宽。
  • minmax() 函数：定义一个长度范围。例如：grid-template-columns: 1fr minmax(200px, 1fr);
  • auto-fill 和 auto-fit 关键字：用于自动填充和适应容器大小。

• grid-template-rows：定义每一行的行高。用法与 grid-template-columns 类似。

• grid-template-areas：定义网格区域。

  • 将网格划分为多个区域，并为每个区域命名。
  • 网格项目可以通过 grid-area 属性指定所属区域。
  • . 表示空单元格。

• grid-column-gap：设置列与列之间的间距（已废弃，建议使用gap）。

• grid-row-gap：设置行与行之间的间距（已废弃，建议使用gap）。

• gap: grid-row-gap和grid-column-gap的简写。例如：gap: 20px 10px; 表示行间距为 20px，列间距为 10px。如果只提供一个值，则行和列间距相同。

• justify-items：设置单元格内容的水平对齐方式（与 Flexbox 的 justify-content 类似，但作用于单元格内部）。

  • start：左对齐。
  • end：右对齐。
  • center：居中对齐。
  • stretch（默认值）：拉伸以填充整个单元格。

• align-items：设置单元格内容的垂直对齐方式（与 Flexbox 的 align-items 类似，但作用于单元格内部）。

  • start：顶部对齐。
  • end：底部对齐。
  • center：垂直居中对齐。
  • stretch（默认值）：拉伸以填充整个单元格。

• justify-content：设置整个内容区域在容器里面的水平对齐方式（与 Flexbox 的 justify-content 类似，但作用于整个网格）。

• align-content：设置整个内容区域在容器里面的垂直对齐方式（与 Flexbox 的 align-content 类似，但作用于整个网格）。

• grid-auto-columns和grid-auto-rows：设置浏览器自动创建的多余网格的列宽和行高.

• grid-auto-flow：控制自动布局算法的行为。

  • row（默认值）：先行后列。
  • column：先列后行。
  • dense：尝试填充较早的空缺。

2.3 项目属性（应用于 Grid 项目）

• grid-column-start：左边框所在的垂直网格线。
• grid-column-end：右边框所在的垂直网格线。
• grid-row-start：上边框所在的水平网格线。
• grid-row-end：下边框所在的水平网格线。

• 可以使用span关键字
  css
.item-1 {
grid-column-start: 1;
grid-column-end: span 2;
}

• grid-column：grid-column-start 和 grid-column-end 的简写属性。

• grid-row：grid-row-start 和 grid-row-end 的简写属性。

• grid-area：指定项目放在哪一个区域。可以与grid-template-areas 属性配合使用，也可以是 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写。

• justify-self：设置单元格内容的水平对齐方式（与 justify-items 类似，但作用于单个项目）。

• align-self：设置单元格内容的垂直对齐方式（与 align-items 类似，但作用于单个项目）。

2.4 实战案例

案例 1：基本网格布局

```html

```

案例 2：使用 grid-template-areas 的复杂布局

```html

``
这个例子通过grid-template-areas清晰的定义了四个区域，header, sidebar, main, footer，并把对应的元素通过grid-area`属性放置到对应的区域中。

三、Flexbox 与 Grid 的对比与选择

Flexbox 和 Grid 都是强大的布局工具，但它们各自擅长的领域有所不同。

• Flexbox：

  • 一维布局：擅长沿着单个轴线（水平或垂直）排列项目。
  • 简单组件布局：适用于导航栏、卡片列表、按钮组等。
  • 内容驱动：项目的尺寸通常由内容决定，Flexbox 负责分配剩余空间。

• Grid：

  • 二维布局：擅长同时控制行和列的布局。
  • 复杂页面布局：适用于杂志布局、仪表盘、图片墙等。
  • 布局驱动：首先定义网格结构，然后将项目放入网格中。

如何选择？

• 如果只需要沿着一个方向排列项目，或者处理简单的组件布局，Flexbox 通常是更好的选择。
• 如果需要同时控制行和列，或者构建复杂的页面布局，Grid 则更胜一筹。
• 在实际开发中，Flexbox 和 Grid 经常会结合使用。例如，可以使用 Grid 来构建整体页面布局，然后在每个网格区域中使用 Flexbox 来排列内容。

四、总结

Flexbox 和 Grid 为我们提供了前所未有的布局能力，让我们能够轻松创建各种响应式、自适应的网页。通过深入理解它们的核心概念、属性和应用场景，并结合实际案例进行练习，你将能够熟练运用这两种布局技术，成为一名真正的 CSS 布局大师。

希望本文能够帮助你更好地理解和掌握 Flexbox 和 Grid，为你的 Web 开发之旅添砖加瓦！