CSS 布局

您可以使用多种方法来布局您的网页和应用程序。MDN 包含许多关于不同方法的深入指南，此页面提供了所有方法的概述。

普通流、块级和内联布局

如果您没有使用 Flex 或 Grid 布局，那么您的内容将使用普通流或块级和内联布局进行布局。这些指南将帮助您了解此布局方法的工作原理。

普通流中的块级和内联布局: 普通流简介。
流内和流外: 如何将项目移出流，以及这对文档布局的影响。
格式化上下文解释: 创建新格式化上下文的简介。
流布局和书写模式: 如果您使用不同的书写模式（例如垂直文本），流布局是如何工作的。
流布局和溢出: 了解和管理溢出。
CSS 基本盒模型简介: 了解盒模型是 CSS 的基础；本指南解释了它的工作原理。
掌握外边距折叠: 了解为什么有时您最终会得到比预期更小的外边距，这是由于普通流中的外边距折叠导致的。
理解 CSS z-index: 绝对定位、Flexbox 和 Grid 都会导致堆叠（元素在 z 轴上的相对位置）可以通过 z-index 属性进行操作。本文解释了如何管理它。

多列布局

多列布局，通常称为 multicol，采用普通流中的内容，并将其分成多列。在以下指南中了解如何使用此布局方法。

Multicol 的基本概念: Multicol 基本功能概述。
样式化列: 列的样式化机会有限；本指南解释了您可以执行的操作。
跨列和平衡: 跨列扩展元素，并平衡列的内容。
处理 Multicol 中的溢出: 当内容超出可用列空间时会发生什么？
Multicol 中的内容断裂: 处理内容断裂，因为内容被分成多列。

Flexbox

CSS 弹性盒布局，通常称为 Flexbox，是一种针对用户界面设计和一维项目布局进行优化的布局模型。在 Flex 布局模型中，Flex 容器的子元素可以向任何方向布局，并且可以“伸缩”其大小，要么增长以填充未使用的空间，要么缩小以避免溢出父元素。

Flexbox 的基本概念: Flexbox 功能概述。
Flexbox 与其他布局方法的关系: Flexbox 如何与其他布局方法和其他 CSS 规范相关联。
在 Flex 容器中对齐项目: 盒对齐属性如何与 Flexbox 一起工作。
Flex 项目的排序: 解释更改项目顺序和方向的不同方法，并涵盖执行此操作时可能出现的问题。
控制 Flex 项目沿主轴的比例: 解释 flex-grow、flex-shrink 和 flex-basis 属性。
掌握 Flex 项目的换行: 如何创建具有多行的 Flex 容器并控制这些行上项目的显示。
Flexbox 的典型用例: Flexbox 典型用例的常见设计模式。

网格布局

CSS 网格布局为 CSS 引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。

网格布局的基本概念: 网格布局功能概述。
网格布局与其他布局方法的关系: 网格如何与其他方法（如对齐、大小调整和 Flexbox）相关联。
使用基于行的放置进行布局: 如何通过编号行放置项目。
网格模板区域: 如何使用网格模板语法放置项目。
使用命名网格线进行布局: 如何命名线条，以及如何通过线条名称而不是编号来放置项目。
CSS 网格布局中的自动放置: 如何管理自动放置算法，以及了解浏览器如何放置项目。
CSS 网格布局中的盒对齐: 如何在网格中对齐项目，并在两个轴上分配空间。
CSS 网格、逻辑值和书写模式: 如何在网格中使用流相关属性和值，而不是物理属性和值。
CSS 网格布局和无障碍访问: 使用网格布局时需要考虑的一些无障碍访问事项。
CSS 网格和渐进增强: 如何确保您的网站在不支持网格的浏览器中仍然可以正常工作。
使用 CSS 网格实现常见布局: 使用网格构建一些常见布局。
子网格: 对子网格值的解释，它是网格级别 2 的一部分。
砌体布局: 对网格级别 3 中砌体布局功能的解释。

对齐

块级布局中的盒对齐: 对齐属性是为块级和内联布局指定的，但目前还没有浏览器支持。
Flexbox 中的盒对齐: 对齐属性首先出现在 Flexbox 中；本指南解释了它们的工作原理。
网格布局中的盒对齐: 如何在网格布局中对齐项目。
多列布局中的盒对齐: 对齐如何在 Multicol 中工作。