Web on Ther 的博客

现代 Web 布局 - (3) Flexbox 布局基础使用

Sat, 04 Jan 2025 22:33:52 +0800

自 2009 年 W3C 发布 Flexible Box Layout Module （WD 版本）至今已有十多年了，在近十年来，该模块得到了快速发展，现已成为最流行的 Web 布局技术之一。在 Web 开发者中，该模块也常称为 Flexbox 布局 。

Flexbox 是一种布局机制，它被设计为一维布局模型，并作为一种可以提供界面中项目之间的空间分配和强大功能的方法。正因如此，Flexbox 布局对于很多 Web 开发者而言，并不是容易的，甚至有很多困惑。

接下来，将分为几节课和大家一起开启 Flexbox 布局的探讨，帮助大家更好地掌握 Flexbox 布局技术。

Flexbox 布局简介

Flexbox 布局是一种布局机制，用于在一个维度上为项目组设置布局！

Flexbox 模块中的主要功能就是 Web 布局。Flexbox 布局可以明确地指明容器空间的分布方式、内容对齐和元素的视觉顺序。使用 Flexbox 布局，可以轻易地实现横向或纵向布局，还可以沿着一个轴布局，或折断成多行。可以说，使用 Flexbox 布局可以轻易地构建你想要的任何布局。

另外，使用 Flexbox 布局还可以让 Web 内容的渲染不再受 HTML 文档源码顺序的限制。然而，这只是视觉上的调整，Flexbox 模块中的相关属性并不会改变屏幕阅读器对内容的读取顺序。

和以往的 Web 布局技术相比，Flexbox 布局所涉及的概念更多、更复杂，如下图所示：

看上去有很多东西，其实也没有大家想象的那么难。接下来的内容能很好地让你掌握 Flexbox 布局。

一些术语和概念

我想你对 Flexbox 布局有一定的了解，而且在互联网上有关于 Flexbox 布局的教程也是玲琅满目，为此我想从 Flexbox 布局相关的术语和概念开始，因为术语的统一更有助于我们后面更好地讨论和解决问题。

用下图来描述 Flexbox 中的术语：

首先要理解的概念就是 Flex 容器（也常称为 Flexbox 容器）。简单地说，HTML 上的大多数元素都可以是 Flex 容器，比如 div 、ul 、main 块元素，span 、em 这样的内联元素。只需要在 HTML 元素上显式设置 display 的值为 flex 或 inline-flex 即可。

注意，HTML 中的可替代元素是无法成为 Flex 容器的，比如img、 input、 select等元素！

当一个元素变成了 Flex 容器之后，它的子元素，包括其伪元素 ::before 、::after 和文本节点都将成为 Flex 项目 。

有一点非常的重要，在 Flexbox 布局中， Flex 容器和 Flex 项目之间的关系永远是父子关系。 因此，Flex 项目也可以是它的子元素的 Flex 容器，即显式地在 Flex 项目设置 display 属性值为 flex 或 inline-flex ，该 Flex 项目就成为一个 Flex 容器，而它的子元素就成为 Flex 项目。但它将是一个单独的 Flex 容器，它不会继承祖辈的 Flex 容器上的属性（Flexbox属性）。

在 CSS 坐标系中，物理坐标系有 x 轴（水平轴）和 y 轴（垂直轴）之分，逻辑坐标系有内联轴（Inline Axis）和块轴（Block Axis）之分。在 Flexbox 中，Flex 容器内也有两个轴，而且这两个轴只存在于 Flex 容器中，分别叫主轴（Main Axis）和侧轴（Cross Axis）。

Flexbox 中的主轴由 flex-direction 属性设置，默认情况下，主轴沿行方向（内联轴 Inline Axis）分布，如果该属性为 column ，则主轴沿列方向（块轴 Block Axis）分布：

需要注意的是，Flexbox 布局中的主轴、主方向、侧轴和侧方向不是固定不变的，它们会随着writing-mode（书写模式）和 direction（阅读方向）而改变。也就是说，Flex 项目在 Flex 容器中的排列方向同时会受 flex-direction 属性和 CSS 的书写模式 writing-mode 或阅读模式 direction 影响。

另外，在 Flexbox 布局中，不管是主轴还是侧轴，都有方向性。既然有方向，就有开始处（即起点）和结束处（即终点）之分。根据起点和终点之分，Flex 容器中的每根轴又有 主轴起点 、主轴终点 、侧轴起点 和 侧轴终点 之分。而且每根轴的起点和终点是由 flex-direction 和 writing-mode (或 direction) 来决定的。

如果 flex-direction 为默认值 row 时，书写模式和阅读模式分别是：

ltr （Left-To-Right），如英文，主轴起点在 Flex 容器左侧边缘，主轴的终点在 Flex 容器右侧边缘；

rtl （Right-To-Left），如阿拉伯文，主轴起点在 Flex 容器右侧边缘，主轴的终点在 Flex 容器的左侧边缘。

在这两种情况下，侧轴的起点都在 Flex 容器的顶部，而终点都在 Flex 容器的底部，这主要是因为两种语言都是水平书写模式。

注意，Flex 容器两轴的起点和终端同样受 flex-direction 、writing-mode 或 direction 属性值的影响。

众所周之， CSS 中的每个元素都是一个容器，是容器它就有大小。Flexbox 布局中的 Flex 容器和 Flex 项目同样是元素，它们也有大小。不同的是，对于 Flex 容器而言，它有 主轴尺寸 （Main Size）和 侧轴尺寸 （Cross Size）之分。它们的差别是：

主轴尺寸 是指主轴起点到终点之间的距离；

侧轴尺寸 是指侧轴起点到终点之间的距离。

也就是说，主轴尺寸和侧轴尺寸可以用来决定一个 Flex 容器的大小。但它们并不完全等同于 Flex 容器的宽高（width x height ）。这是因为 flex-direction 和 writing-mode 或 direction 属性值不同时，用于描述 Flex 容器的物理属性 width 和 height 有可能会互换的。比如：

当 flex-direction 为 row ，且书写模式和阅读模式是 LTR 时，主轴的尺寸对应的就是 Flex 容器的宽度，侧轴的尺寸对应的则是 Flex 容器的高度；

当 flex-direction 为 column ，且书写模式和阅读模式是 LTR 时，主轴的尺寸对应的就是 Flex 容器的高度，侧轴的尺寸对应的则是 Flex 容器的宽度。

另外，可以在 Flex 容器上显式使用 CSS 的物理属性 width 和 height ，或使用 CSS 的逻辑属性 inline-size 和 block-size 设置 Flex 容器主轴和侧轴的尺寸，也可以使用 min-* 和 max-* 对 Flex 容器主轴和侧轴的尺寸加以限制。

如果没有显式给 Flex 容器设置尺寸，则会根据所有 Flex 项目的大小来决定，或根据 Flex 容器的父容器来决定。

注意，如果需要显式设置 Flex 容器尺寸的话，使用逻辑属性 inline-size 或 block-size 更符合多语言的 Web 布局！

现在，我们已经知道了， 主轴尺寸 x 侧轴尺寸 可以决定一个 Flex 容器的大小。 在一个 Flex 容器中可能会包含一个或多个 Flex 项目，且每个 Flex 项目也会有其自身的尺寸大小，这样一来，就有可能造成：

所有 Flex 项目宽度（或高度）小于 Flex 容器的宽度（或高度），Flex 容器就会有多余的空间没有被填充，那么这个多出来的空间常称为 Flex 容器的剩余空间 （Positive Free Space）。

所有 Flex 项目宽度（或高度）大于 Flex 容器的宽度（或高度），Flex 项目将会溢出 Flex 容器，那么这个溢出的空间常称为 Flex 容器的不足空间 （Negative Free Space），也称为 负空间 。

Flexbox 布局中有一个强大的特性，当 Flex 容器有剩余空间时：

可以使用主轴的对齐方式 justify-content 来分配主尺寸的剩余空间；

可以使用侧轴的对齐方式 align-content 来分配侧尺寸的剩余空间。

也可以使用 flex 属性中的 flex-grow 按比例因子来扩展 Flex 项目的尺寸；当 Flex 容器是不足空间（Flex 项目溢出 Flex 容器），你可以使用 flex 属性中的 flex-shrink 按比例因子来对 Flex 项目进行收缩。这个计算在 Flexbox 布局中是复杂的，而且会涉及一定的数学计算，后面我们将会有一个节课专门来介绍这方面的知识。

到此，你对 Flexbox 布局中的主要术语和概念有了一定的了解了，接下来，我们一起来探讨 Flexbox 布局中的几个重要特性。

Flexbox 布局模块相关特性

Flexbox 布局模块除了概念多之外，就是可用于 Flexbox 布局的属性也多，这些属性分为两个部分，其中一部分用于 Flex 容器 上，另一部分用于 Flex 项目 上。

可用于 Flex 容器上的属性主要有：

可用于 Flex 项目上的属性相比于 Flex 容器上要少一点，它主要有：

注意，在这里我们并不会针对每个属性进行介绍！

控制 Flex 项目的方向

在 Flex 容器中，即使你没有显式设置 flex-direction 属性的值，Flex 容器中的所有 Flex 项目也会显式为一行，因为 flex-direction 属性的初始值是 row 。如果你希望 Flex 项目在 Flex 容器中不是按行呈现，而是按列呈现，则可以将其设置为 column 或 column-reverse 。

来看一个简单的示例：

<div class="container">
    <div class="item">Flex项目1</div>
    <div class="item">Flex项目2</div>
    <div class="item">Flex项目3</div>
</div>

.container {
    --direction: row;
    display: flex;
    flex-direction: var(--direction);
}

Demo 地址： https://codepen.io/airen/full/MWGeyLw

尝试改变 Demo 中 flex-direction 属性的值，你将看到的效果如下：

前面我们说过，默认情况下，Flex 项目排成一行，这一行与书写模式（或阅读模式）的方向是相同的，比如上面示例，使用的是英文，它的阅读模式是 ltr ，Flex 项目紧挨着 Flex 容器左侧边缘（左对齐）。这意味着，如果我们使用的是阿拉伯语系，即书写模式是 rtl ，则 Flex 项目将紧挨着 Flex 容器的右侧边缘（右侧对齐）：

<div class="container">
    <div class="item">Flex项目1</div>
    <div class="item">Flex项目2</div>
    <div class="item">Flex项目3</div>
</div>

<div class="container" dir="rtl">
    <div class="item">عنصر فليكس1</div>
    <div class="item">عنصر فليكس2</div>
    <div class="item">عنصر فليكس3</div>
</div>

.container {
    --direction: row;
    display: flex;
    flex-direction: var(--direction);
}

Demo 地址：https://codepen.io/airen/full/MWGeeLo

另外，CSS 的 writing-mode 属性的值也将影响 flex-direction 属性最终呈现的效果：

Demo 地址：https://codepen.io/airen/full/rNvLLgJ

因此，默认情况下，Flex 项目的行为与文档的书写模式相关。大多数教程使用英语编写，或者采用另一种从左到右的水平书写模式编写。这样就可以很容易地假设弹性项目在左侧对齐并沿水平方向分布。

在实际的业务开发中，使用 Flexbox 布局时，flex-direction 是非常有用的，比如下图这个布局效果，红色虚线框中的 Flex 项目是按行排列，flex-direction 不需要显式设置，但黑色虚线框是按列排列，需要显式将 flex-direction 属性的值设置为 column。

flex-direction 中的 row 和 row-reverse （或 column 和 column-reverse）可以让主轴的起点和终点（或侧轴的起点和终点）互换。它们在一些布局中也是非常有用的，比如像下图这样的效果，希望双数的卡片的缩略图靠右，单数的缩略图居左。我们只需要一行代码即可：

.card:nth-child(2n) {
    flex-direction: row-reverse;
}

Demo 地址： https://codepen.io/airen/full/oNdLzov

不过，在使用 flex-direction 属性值 row-reverse 和 column-reverse 时，会对 Web 可访问性造成负面影响，因为该属性只是对视觉呈现进行重排，其对应的 HTML 文档的源码顺序是不受该属性影响的。

Flex 项目换行

默认情况之下，Flex 容器中的所有 Flex 项目沿着主轴方向依次排列（不会换行的或换列），即使是 Flex 项目溢出了 Flex 容器也是如此。这主要是因为 flex-wrap 属性的默认值为 nowrap ：

需要注意的是，如果 Flex 容器没有足够多的空间，Flex 项目在溢出之前，每一个 Flex 项目将会尽可能缩小到其最小内容（min-content）的尺寸。即 Flex 项目一旦达到最小内容（min-content）大小， Flex 项目将开始溢出 Flex 容器 ！

Demo 地址：https://codepen.io/airen/full/ZEoOpPV

如果你希望避免这个现象，只需要在 Flex 容器上显式设置 flex-wrap 属性的值为 wrap ：

.flex-container {
    flex-wrap: wrap;
 }

Demo 地址：https://codepen.io/airen/full/XWqKNrL

Flex 容器在换行后会创建多个 Flex 行 。在空间分布方面，每一行就像一个新的 Flex 容器。因此，如果你要换行，则无法让第 2 行中的某些内容与它上面第 1 行中的某些内容对齐。这就是所谓的 Flex 容器是一维框（盒子）。你只可以在独立的轴上（主轴或侧轴）也就是一行或一列上对齐 Flex 项目，但不能像 CSS Grid 那样同时在两个轴上控制 Grid 项目。

为此，在使用 Flexbox 布局时，为了让你的布局更具灵活性（代码更健壮，具有一定的防御性），个人建议你在显式声明的 Flex 容器上同时加上 flex-wrap 的值为 wrap :

/* 不具防御性的 CSS */
.flex-container {
    display: flex; /* 或 inline-flex */
}

/* 具有防御性的 CSS */
.flex-container {
    display: flex; /* 或 inline-flex */
    flex-wrap: wrap;
}

当然，如果你的布局不需要换行，那么 Flex 容器的 flex-wrap 采用默认值 nowrap 更理想。如下图所示：

事实上它并不是我们所期望的效果，我们所期望的效果是下图这样的，布局需要换行，就需要显式的设置 flex-wrap 为 wrap 。

flex-wrap 属性除了取值为 wrap 会让 Flex 项目换行排列之外，其另一个属性 wrap-reverse 也会让 Flex 项目换行排列，只不过行的排列方向和 wrap 相反。假如你使用的语言是英文，即书写模式和阅读模式都是 ltr ，那么 flex-wrap 取值为 wrap 时，Flex 行的排列将会沿着 Flex 容器侧轴方向从开始处（Flex 容器顶部）向下排列；反之 flex-wrap 取值为 wrap-reverse 时， Flex 行的排列将会沿着 Flex 容器侧轴方向从终点处（Flex 容器底部）向上排列：

flex-wrap: wrap-reverse 同样也受 flex-direction 属性取值的影响：

Demo 地址： https://codepen.io/airen/full/KKRadzb

还有一点需要特别的注意，flex-wrap: wrap (或 flex-wrap: wrap-reverse)碰到了设置 flex:1 项目时，只有在 Flex 容器没有足够空间容纳 Flex 项目时（即，同一 Flex 行所有 Flex 项目最小内容宽度总和大于 Flex 容器宽度），才会让 Flex 项目换行（或列），另外使用 flex-wrap: wrap 要有一个心理预判，不然也有可能会让 UI 视觉上不美，但不会撑破布局（如上例所示）！ 选择总是痛苦的（^_^）。

CSS 中有很多简写属性，简写属性可以包含多个子属性。如果你在编写 CSS 的时候，需要同时显式设置 flex-direction 和 flex-wrap 属性时，那么可以使用它们的简写属性 flex-flow :

.flex-container {
    display: flex;
    flex-flow: column wrap;
}

/* 等同于 */
.flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

我们在使用 flex-flow 属性时，可以只显式设置一个值，也可以显式设置两个值：

flex-flow 只显式设置一个值，并且该值和 flex-direction 相匹配时， flex-wrap 会取值 initial ；

flex-flow 只显式设置一个值，并且该值和 flex-wrap 相匹配时，flex-direction 会取值 initial ；

flex-flow 显式设置两个值时， flex-direction 和 flow-wrap 没有先后顺序之分，即 flex-flow: column wrap 和 flex-flow: wrap column 所起作用是等同的。

来看具体代码：

.flex-container {
    display: flex;
    flex-flow: column;
    
    /* flex-flow 等同于 */
    flex-direction: colmun;
    flex-wrap: initial;
}

.flex-container {
    display: flex;
    flex-flow: wrap;
    
    /* flex-flow 等同于 */
    flex-direction: initial;
    flex-wrap: wrap;
}

.flex-container {
    display: flex;
    flex-flow: column wrap;
    
    /* flex-flow 等同于 */
    flex-flow: wrap column;
    
    /* flex-flow 还等同于 */
    flex-direction: column;
    flex-wrap: wrap;
}

Flex 项目排序

Web 页面是由多个 HTML 元素组建而成，HTML 文档中的元素是按照其在文档中出现的先后顺序决定的，比如下面这样的一个 HTML 文档：

<body>
    <header></header>
    <main></main>
    <aside></aside>
    <footer></footer>
</body>

在没有任何 CSS 约束之下，它呈现的顺序将会是如下图所示：

通过前面的内容我们知道了 Flexbox 布局中，我们可以在 Flex 容器上使用 flex-direction 属性的值 row-reverse 和 column-reverse 来改变主轴和侧轴上 Flex 项目的排列顺序。但不能单独改变某个 Flex 项目的顺序。如果仅是单独对某个（或某几个） Flex 项目重新排序的话，就需要使用可用于 Flex 项目上的 order 属性。

使用 order 属性可以为 Flex 容器中的项目重新排序。此属性可用于对有序组中的项目进行排序。项目按照 flex-direction 指定的方向排列，最小值在最前面。如果多个项目具有相同的值，它将与具有该值的其他项目一起显示（按其在源码文档的顺序排列）。

order 初始值是 0 ，可以是正值，也可以是负值，属性值越大，越排在主轴的后面，反之越在主轴的前面。

如上图所示。

第一组中所有 Flex 项目未显式设置 order 值（即默认值为0），Flex 项目按照 HTML 文档的源码顺序沿着主轴排列。

第二组中第二个 Flex 项目显式设置 order 的值为 1，这个时候该 Flex 项目会排列在最末尾。

第三组中第四个 Flex 项目显式设置 order 的值为 -1，这个时候该 Flex 项目会排列在最前面。

来看一个简单的示例：

<div class="container">
    <div class="item">Flex Item1</div>
    <div class="item">Flex Item2</div>
    <div class="item">Flex Item3</div>
    <div class="item">Flex Item4</div>
    <div class="item">Flex Item5</div>
    <div class="item">Flex Item6</div>
</div>

.container {
    display: flex:
    flex-wrap: wrap;
}

:root {
  --order: 0;
}

.item:nth-child(2) {
  order: -1;
}

.item:nth-child(3) {
  order: var(--order);
}

.item:nth-child(4) {
  order: 3;
}

Demo 地址： https://codepen.io/airen/full/ZEoORVY

示例中我们显式指定了第二个 Flex 项目的 order 值为 -1 ，第四个 Flex 项目的 order 值为 3 ，并且动态调整第三个 Flex 项目的 order 值，你将看到的效果如下：

在 Flexbox 布局中，在 Flex 项目上使用 order 属性可以和在 Flex 容器上使用 flex-direction 的 row-reverse （或 column-reverse ）等同的效果：

order 属性也适用于页面级别的布局，比如下面这个示例：

<!-- HTML --> 
<header>Header Section</header> 
<main> 
    <article>Article Section</article> 
    <nav>Nav Section</nav> 
    <aside>Aside Section</aside> 
</main> 
<footer>Footer Section</footer>

其中 <article> 放在 <nav> 和 <aside> 前面，主要是为了内容为先。针对这样的 DOM 结构，如果我们希望 <nav> 在 <article> 左侧，<aside> 在 <article> 右侧时，order 属性就可以起关键性的作用：

nav {
    order: -1;
}

main:hover nav {
    order: 1;
}

main:hover aside {
    order: -1;
}

Demo 地址：https://codepen.io/airen/full/MWGeBKa

需要注意的是，order 在使用时与 flex-direction 的值 row-reverse 和 column-reverse 存在相同的问题。它对 Web 可访问性是不友好的。请勿使用 order，因为你需要修复文档中的乱序问题。

Flex 项目之间的间距

以往在 CSS 中，常常使用 margin 属性来设置元素与元素之间的间距。在今天，Flexbox 布局中，你可以使用 gap 属性来设置元素与元素之间的间距。实质上，gap 是用来定义列与列 或 行与行 之间的间距。

gap 属性的使用非常的简单，只需要在 Flex 容器显式指定gap 属性值即可：

:root {
  --gap: 1rem;
  --columns: 5;
}

.container {
  gap: var(--gap);
}

.item {
  flex-basis: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
}

Demo 地址：https://codepen.io/airen/full/LYmZJjo

效果如下：

gap 属性可接受一个值，也可以接受两个值，当只显式设置一个值时，那么第二个值和第一个值等同，如果显式设置两个值，第一个值是 row-gap 属性的值，第二个则是 column-gap 属性的值：

.flex-container {
    gap: 10px;
    
    /* 等同于 */
    row-gap: 10px;
    column-gap: 10px;
}

.flex-container {
    gap: 10px 20px;
    
    /* 等同于 */
    row-gap: 10px;
    column-gap: 20px;
}

在上面我们介绍 Flexbox 术语和概念时提到过，gap 和 margin 虽然都可以设置元素与元素之间的间距，但它们之间有明显的差异：

margin 除了难以达到设计预期效果之外，它们使用的地方也略有差异：

gap 运用在 Flex 容器上，但它无法给 Flex 项目设置不同的外间距；

margin 运用在 Flex 项目上，可以给 Flex 项目设置不同的外间距。

另外，使用 margin 会让 Flex 项目与 Flex 容器之间有空白间距：

在 gap 属性还没出现之前，往往都是使用 margin 来模拟 gap 属性的效果：

<div class="container">
  <div class="flex__container flex__container--margin" data-gutter="margin">
    <div class="flex__item">Flex Item 1</div>
    <div class="flex__item">Flex Item 2</div>
    <div class="flex__item">Flex Item 3</div>
    <div class="flex__item">Flex Item 4</div>
    <div class="flex__item">Flex Item 5</div>
    <div class="flex__item">Flex Item 1</div>
    <div class="flex__item">Flex Item 2</div>
    <div class="flex__item">Flex Item 3</div>
    <div class="flex__item">Flex Item 4</div>
    <div class="flex__item">Flex Item 5</div>
  </div>
</div>
<div class="container">
  <div class="flex__container flex__container--gap" data-gutter="gap">
    <div class="flex__item">Flex Item 1</div>
    <div class="flex__item">Flex Item 2</div>
    <div class="flex__item">Flex Item 3</div>
    <div class="flex__item">Flex Item 4</div>
    <div class="flex__item">Flex Item 5</div>
    <div class="flex__item">Flex Item 1</div>
    <div class="flex__item">Flex Item 2</div>
    <div class="flex__item">Flex Item 3</div>
    <div class="flex__item">Flex Item 4</div>
    <div class="flex__item">Flex Item 5</div>
  </div>
</div>

:root {
  --flexDirection: row;
  --flexWrap: wrap;
  --item-basis: 100px;
  --gap: 1rem;
  --columns: 5;
}

.container {
  width: calc(
    var(--item-basis) * var(--columns) + var(--gap) * (var(--columns) - 1) + 6px
  );
}

.flex__container {
  display: flex;
  flex-flow: var(--flexDirection) var(--flexWrap);
}

.flex__container--margin {
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
}

.flex__container--margin > .flex__item {
  margin: var(--gap) 0 0 var(--gap);
}

.flex__container--gap {
  gap: var(--gap);
}

.flex__item {
  inline-size: var(--item-basis);
  aspect-ratio: 1;
}

Demo 地址： https://codepen.io/airen/full/wvjWERe

效果如下：

小结

通过这一节的学习，我想你对 Flexbox 布局应该有了进一步的了解。知道了如何使用 flex-direction 和 order 来控制 Flex 项目的排序；如何使用 flex-wrap 属性让 Flex 项目换行以及使用 gap （或 margin）控制 Flex 项目之间的间距等。

这些只是 Flexbox 布局基础知识的几个关键功能，其实 Flexbox 布局中还有另一个关键功能，那就是 Flex 容器空间分配。接下来的课程中，我将着重和大家一起探讨 Flex 容器的空间是如何分配的，也就是 Flexbox 布局中对齐模式。

现代 Web 布局 - (2) 现代 Web 布局技术术语

Wed, 01 Jan 2025 19:07:52 +0800

Web 发展的每个不同时期都有新的技术为 Web 布局提供支持，但不管是哪个时期，Web 布局相关的概念和术语都是相同的。如果你想彻底或者更好地掌握 Web 布局，那么首先需要对 Web 布局相关的技术术语有所了解。

在这一节中，我们一起来探讨 Web 布局相关的术语。

Web 坐标轴

坐标轴不只是存在于数学中，它同样存在于 Web 世界中。在 Web 中，我们常称之为 Web 坐标轴 或 CSS 坐标系统 。

在 Web 中，默认原点是给定上下文的左上角，也就是元素盒子的左上角，它分为 x 轴（也称为水平轴），向右为正值，向左为负值；y 轴（垂直轴），向上为负值，向下为正值：

请注意，这与大多数数学模型不同，其中原点位于左下角，正 y 坐标值位于原点上方。

事实上，除了大家熟悉的平面画布中的 x 和 y 轴之外，还有控制第三维度的 z 轴。比如使用 CSS 的 transform 绘制 3D 图形或使用第三维度从前往后对对象进行分层：

也会在定位元素（显式使用position 属性值为非 static 的元素）上使用 z-index 控制其层叠的顺序（z 轴上的层叠顺序），它表示的是用户与屏幕的这条看不见的垂直线：

上面我们看到的 CSS 坐标系，只是最初的坐标系的定义。随着 CSS 的逻辑属性出现，CSS 的坐标系也随之改变。它分为 内联轴 （Inline Axis）和块轴（Block Axis）。

众所周知，在 CSS 中，每个元素都是一个盒子，默认情况之下，盒子会根据元素类型分为块盒子（比如块元素 div ）和内联盒子（比如span）。其中块盒会在垂直方向从上往下堆叠，内联盒子将会按照书写方式从左往右排列：

当我们的书写方式改变时，块盒子和内联盒子也会有相应的变化，就拿内联盒子为例，书写模式改变之后，它的方向也会随之改变：

简而言之，块元素遵循流方向，内联元素遵循写入方向：

也就是说，随着 CSS 的逻辑属性的出现，CSS 的坐标系就不再以 x 轴和 y 轴来定义，而是以内联（Inline）和块（Block）来区分，并且内联方向的称之为 内联轴 （Inline Axis），也就是书写模式的方向；块方向的称之为块轴（Block Axis），也就是块盒子自然流的方向。它们随着 CSS 的书写模式改变，如下图所示：

如此一来，在 CSS 中就有物理坐标系 和 逻辑坐标系 之分，它们的对应关系如下：

物理属性	逻辑属性(`horizontal-tb`)	逻辑属性(`vertical-lr`)	逻辑属性(`vertical-rl`)
`x` 轴（水平轴）	Inline 轴（内联轴）	Block 轴（块轴）	Block 轴（块轴）
`y` 轴（垂直轴）	Block 轴（块轴）	Inline 轴（内联轴）	Inline 轴（内联轴）

注意，不管是在物理坐标系还是逻辑坐标系中，z 轴是不变的！

容器和容器空间

容器这个概念很简单。熟悉 CSS 的同学都知道，HTML 的每一个元素在 CSS 中都是一个盒子，这个盒子又被称为容器。只不过，这个容器会随着盒子的类型不同，容器的称呼也会有不同。它主要由 CSS 的 display 属性的值来决定，比如：

block 时称为块容器；

inline 时称为内联容器；

flex 或 inline-flex 时称为Flexbox容器；

grid 或 inline-grid 时称为 Grid 容器（网格容器）。

每个容器就像生活中的器皿一样，不管是什么类型的容器，它都有空间。只不过这个空间的大小是由 CSS 盒模型相关的属性来决定的：

只不过，Web 开发者习惯性以 width 、height 、 min-* 或 max-* 以及它们对应的逻辑属性来显式指定一个容器空间的大小：

而且容器大小计算方式也会受 CSS 的 box-sizing 属性的值影响：

每个容器中都有可能会放置内容（文本内容或其他元素），随着容器中放置的内容多少，可能会造成指定大小的容器无法容纳嵌套的内容，造成内容溢出（超出指定容器的大小）；也有可能放置的内容较少，无法填充满整个容器。

按此呈现模式，每个容器的大小（空间）又有可用空间 （也称为 剩余空间 ）和 不可用空间 （也称为 不足空间 ）：

间距

Web 是由很多个元素堆叠而成的，为了让 Web 页面给用户提供更好的体验，Web 设计师在设计时，会根据美学相关的理论来设计元素与元素之间，元素内容与元素盒子边缘之间的间距：

只不过，在 Web 布局中，我们常常是使用 CSS 的 margin 、padding 和 gap 三个属性来设置间距。不同的是：

框与框（也就是元素与元素）之间的间距一般采用 margin 或 gap 属性来设置，也常称为外距；

内容与框的边缘（元素内容与元素框边缘）之间的间距一般采用 padding 来设置，也常称为内距。

如下图所示：

特别要提出来的是，CSS 中的 margin 和 gap 表现形式是有较大差异的，它们之间的差异用下图来阐述：

书写模式

世界上有很多种语言（简称世界语言），比如汉语、英语、印度斯坦语、西班牙语、阿拉伯语、俄语、葡萄牙语、德语和法语等。在互联中也有一些常用语言，比如英语、汉语、西班牙语、葡萄牙语、印尼语（马来语）、法语、日语、俄语和德语等。

不同的语系，它们的书写模式（阅读模式）是有差异的：

拉丁语体系 是从左往右，比如英语、西班牙语、德语、法语等；

阿拉伯语体系 是从右往左，比如阿拉伯语、希伯来语等；

汉语体系 有两种方式，有可能是从左往右，也有从上向往下，比如中文、日文、韩文等。

正因为语言的书写方式不同，在 Web 中呈现不同语系时，CSS 中的块（Block）和内联（Inline）表现的方式也会不同。

在 Web 布局中，尤其是针对多语言的 Web 布局，我们可以通过 HTML 元素的 dir 属性或 CSS 的 direction 属性来控制书写模式，比如 ltr （Left-To-Right，也就是从左往右的书写方式），rtl （Right-To-Left，也就是从右往左的书写方式）。除此之外，还可以使用 CSS 的 writing-mode 属性来控制：

正因为语系不同书写模式不同，也将造成 CSS 中布局相关属性最终呈现给用户的效果有所差异，比如 Flexbox 中的 flex-direction 属性，CSS Box Alignment 模块中的属性以及 Grid 布局等。

逻辑属性

我们构建的 Web 页面不仅是局限于单语种中，你负责的业务有可能是国际业务。这样一来，你构建的 Web 页面是一个多语种的 Web 页面，那么你的布局会因为语种不同有所差异。比如 Facebook 的登录页面：

上图中左侧是汉语体系的布局效果，右侧是阿拉伯语体系的布局效果。

众所周知，CSS 中有很多属性和值是遵循 TRBL (Top、Right、Bottom 和 Left ) 模式的：

比如，我们熟悉的元素位置会映射到 top 、right、bottom 和 left，除此之外，像 border 、 margin 、padding 和 border-radius等属性的子属性也会映射到 TRBL 上，如 margin-top 、margin-right 、margin-bottom 和 margin-left 。它们带有明确的方向性。只不过，针对多语言布局时，它给布局带来很大的局限性，比如下面这个简单地示例：

.thumb {
    margin-right: 1rem;
}

在ltr 模式（比如英文）和 rtl 模式（比如阿拉伯文），效果将会是像下图一样：

这个效果并不是我们所期待的，如果希望达到预期的效果，在以往编码的时候，需要做额外的处理：

.thumb {
    margin-right: 1rem;
}

[dir="rtl"] .thumb {
    margin-left: 1rem;
}

为了解决类似上图这样的问题，2017 年 5 月 18 日，W3C 的 CSS 工作组（CSS Working Group）发布了 CSS逻辑属性和值（CSS Logical Properties and Values Level 1）的首份工作草案（First Public Working Draft）。

在这个模块中并没有方向性的概念，只有开始（start ）、结束（end）、块（block）和内联（inline ）的概念。这样一来，在从左到右的（ltr）中，start 对应的是 left ，但在从右到左（rtl）中，start 对应的是 right 。也就是说，逻辑属性更易于适应不同的书写模式。

当然，逻辑属性出现之后，很多 CSS 属性和属性值也随之有了变化，在原有的物理属性的基础上映射了一份逻辑属性。尤其是 CSS 的盒模型相关的属性（比如 width、height 、min-* 、max-* 、border 、margin 、padding）、定位位移相关的属性（比如 top 、right 、bottom 和 left）、排版方面的（比如float 属性的值 left 和 right）以及圆角 border-radius 等：

而且映射关系与 CSS 的 writing-mode 属性值也有关系，对应关系如下图所示：

有了逻辑属性之后，构建多语言 Web 的布局就要方便得多：

.thumb {
    margin-inline-end: 1rem;
}

对齐方式

这里所说的对齐方式指的是 CSS Box Alignment 模块，该模块的出现可以说改善了 CSS 中非常有限的对齐能力。在以往，我们控制对齐方式主要是依赖于 CSS 的 text-align （水平方向文本对齐）和 vertical-align （垂直方向文本对齐）两个属性，对于块的对齐方式主要依赖于 float 属性。它们是无法满足 Web 布局中的对齐控制。

庆幸的是，随着 CSS Flexbox 特性出现之后，CSS 新增了像 justify-content 、align-content 、align-items 、justify-items 和 justify-self 以及 align-self 等属性，用来控制 Web 布局上的对齐方式。最初这些属性是在 Flexbox 相关规范中定义的，但随着 CSS Grid 布局出现之后，W3C 的 CSS 工作组将这些属性单独划分到一个模块中，即 CSS Box Alignment 模块。

正如 @Pratham 发的 Twitter 信息上所说：

CSS Box Alignment 模块是 Web 布局不可或缺的部分，而且其中有很多概念是极易于混淆的。

CSS Box Alignment 模块中，取不同的值时，能得到不同的对齐结果，比如靠左（开始）、靠右（结束）、中间对齐、两端对齐等：

注意，上图由 @Pratham 绘制！

需要注意的是， CSS Box Alignment 模块中的属性同时可以运用于 CSS Flexbox 和 CSS Grid 布局中，在运用于 CSS Flexbox 和 CSS Grid 布局中时略有差异，具体我们会在后面介绍 Flexbox 和 Grid 布局中会提到，在这里不详细阐述，大家只要知道，在现代 Web 布局技术中，对齐方式新增了该模块！

小结

在这篇文章中，我们主要和大家一起探讨了 Web 布局相关的概念和术语。从我们最为熟悉的坐标系统开始，到我们熟悉的容器以及容器空间，再到新增的书写模式、逻辑属性以及对齐方式等。我们花一个节课来介绍这方面，主要是为了和大家把布局相关的概念统一起来，为后续布局打下基础。

有了这些基础和认识之后，就可以开启现代布局中的 Flexbox 布局了！Let’s Go! (^_^)

现代 Web 布局 - (1) Web 布局技术演进：了解 Web 布局发展史

Wed, 01 Jan 2025 17:47:52 +0800

自 1989 年至今，Web 已经有 30 多年的历程了。30 多年来，Web 也发生了翻天覆地的变化，Web 开发工作也衍生出多种工作岗位，而我们作为 Web 前端开发者的其中一员，更应该感谢 Web 给我们带来的机遇和未来。从今天开始，我们来一起探讨 Web 开发中一小部分相关的技能（或者说知识），即 Web 布局。

Web 布局演变过程

多年以来，Web 布局已经改变了互联网。那么， Web 布局是从什么时候开始的，又是如何走到今天的呢？我们将深入研究 Web 布局的历史和演变，看看几十年来 Web 布局最佳实践是如何变化的。

Web 布局的历史关键点的可以通过《Web Design History Timeline》来了解！

自1991 年 Berners-Lee 创建出世界上首个 Web 页面到如今天，Web 布局主要可以分为六个关键点：

正如上图所示，每个关键点都有新的布局技术出现，也正因如此，Web 布局也随着技术的变革变得越来越灵活，越来越强大。其主要表现在，Web 布局的适配性更强、美感更强、用户体验更好等等。

除此之外，我们还可以换过一个角度来看。因为不同时代，Web布局（设计）有着自己不同的定义：

在 Web 布局（或者说 Web 设计）中，每个版本有着自己清晰的定义：

Web 设计 1.0（Web Design 1.0）是“一维的 ”：设计元素大多是按顺序排列的（按文档流的自然顺序排列）；

Web 设计 2.0（Web Design 2.0）是“二维的 ”：单元格中有放置元素的网格，具有更多的自由性；

Web 设计 3.0（Web Design 3.0）是一个“新的维度 ”：它可以像平面设计工具一样，自由地定位元素、重叠，为网页设计开辟了新的前景，也将开启新的 Web 页面设计时代。

注意，这里所说的“二维”布局仅是坐标轴上来描述的，它和后面要介绍的 CSS Grid 布局中提到的二维布局概念是不一样的！到目前为止，只有 CSS Grid 布局才是二维布局！

刚才我们也提到过了，Web 布局的演进有六个关键点，这样划分是因为，在这个时候有新的 Web 布局技术出现，使用不同的布局技术，对 Web 布局也有着不同的称谓。

有了这个基础，接下来我们将围绕着 Web 布局这六个关键点来展开。和大家一起探讨每个关键点中采用的主流 Web 布局技术。

无任何布局模式

互联网上的第一个网站是由 Tim Berners-Lee 创建的，他在瑞士研究中心 CERN（欧洲核研究组织）设计了该网站。

Tim Berners-Lee 不仅被誉为第一位 Web 设计师，他还创建了超文本标记语言 (HTML 规范)，并使用该语言对 CERN 网站进行了编码。他还编写了第一个 Web 服务器规范 (HTTP) 和 Web 浏览器。他将继续创建万维网联盟，该联盟至今仍负责监督 Web 标准的开发。

Tim Berners-Lee 对漂亮的格式不太感兴趣。出于这个原因，HTML 的原始规范不包含任何真正能够准确控制页面布局的能力。

也就是说，在早期的 Web 设计时代，Web 页面上的信息（元素）通常按照正常的流顺序（出现在 HTML 文档的源顺序）来组织。它没有色块、没有图像、没有图形，只有文字。与我们今天所认为的“网页设计”相去甚远。

这个阶段（大约1991年~1994年）没有任何 Web 技术可言，他仅仅依靠 HTML 文档的顺序来组织和展示 Web 页面信息 ！

在这个阶段只有 展示性的 HTML 标签和 单像素的 GIF 技巧。

展示性的 HTML 标签

早期的 HTML 规范仅提供了 18 个 HTML 标签的描述：<title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>～<h6>, <address>, <hp1>, <hp2>, <dl>, <dt>, <dd>, <ul>, <li>,<menu>和<dir>。

在这同一时间，主流浏览器制造商（Netscape 和 Microsoft）添加一些标签，允许 Web 开发人员使用一些具有“展示性”的 HTML 标签来控制页面外观，例如粗体的<b>和斜体的<i>。有些标签还允许更改字号<font size="+2">、设置字体<font face="verdana">以及文本颜色<font color="red">和背景颜色<body bgcolor="blue">。甚至某种程度的图像对齐也可以通过<img>标签的属性来完成，例如<img src="logo.gif" align="center" />。

只不过，这种方式很快成为 Web 开发人员维护页面的一个巨大问题，必须在站点的多个页面上的多个实例中进行更改。此外，Web 的创始人，例如 Tim Berners-Lee，曾设想 HTML 仅用于定义文档的结构，而不是用于控制展示。

注意，<img>标签大约在 1995 年才进入 HTML 规范的！

单一像素的 GIF 技巧

虽然首个 Web 页面仅仅是文本和超链接的展示，但在第二年（1992年）开始，图片就可以通过<img>标签在 Web 页面中呈现。下图是世界上首先被运用于 Web 页面的图片之一。

不过在当时，Web 开发者更喜欢使用单像素透明图片（GIF）来设置元素之间的间距。作为透明图像，该像素后面的任何内容，例如背景图像或颜色，都会显示出来。

单像素图像下载速度很快，因为它是不可见的（透明的），设计师可以通过添加间距属性（例如 <img src="smiley.gif" hspace="75" > 或width或height）来简单地改变水平和（或）垂直间距，例如 <img src="single.gif" width="150" > 以创建所需的任意数量的空白空间。

表格布局模式

互联网的发展是快速的，仅仅几年之后，HTML 2.0 （大约在 1995 年）就新增了图片（<img>）、表单（<form>）和表格（<table>）等标签。这为 Web 开发人员在页面组织方面提供了更多的创造性自由。

就在 HTML 2.0 表布之后的第二年（1996年），用于展示数据的表格就被用于 Web 的布局上，而且越来越受欢迎，也就在这个时候，表格布局模式 就随之开启了。

例如：

<table>
    <tr>
        <td colspan="2">顶栏</td>
    </tr>
    <tr>
        <td>左列</td>
        <td>右列</td>
    </tr>
</table>

效果如下：

早期的 Netscape 站点就是使用表格进行布局的：

直到如今，在互联网上依旧能看到使用表格布局的 Web 页面！

尽管表格（<table>）的设计初衷是用于数据展示，而不是为 Web 布局而设计的，但表格在 2000 年代成为 Web 布局的“首选”方案。虽然使用表格来对 Web 布局，可以让 Web 页面以一定的结构性来呈现页面信息，但对于 Web 开发人员来说依旧是痛苦的，而且对于页面的性能也是致命的。

虽然表格布局有着天生的不足，但它对于 Web 的设计和开发的演变有着革命性的影响，它将彻底改变 Web 设计的历史！即有 Web 布局这样的一个概念！

大约在使用表格进行布局的同时，HTML 框架标签（<frameset>）的使用也很流行。使用<frameset>标签，HTML 文档可以指定页面区域，使用<frame src>标签可以包含其他 HTML 文件（.html）。框架集甚至可以嵌套以获得更好的控制。

下面的示例显示了五个单独的页面如何包含在主<frameset>标记中。

<frameset cols="30%,*">
    <frameset rows="40%,*">
        <frame src="frame1.html">
        <frame src="frame2.html">
    </frameset>
    <frameset rows="33%,33%,*">
        <frame src="frame3.html">
        <frame src="frame4.html">
        <frame src="frame5.html">
    </frameset>
</frameset>

大致效果如下：

当然，这个系统意味着开发人员必须为一个布局管理多个 HTML 文件。由于其他原因，框架也存在问题。比如页面添加书签效果不佳、页面超链接会令人常感到困惑，而且它们对搜索引擎也不友好。

随着设计和开发工具变得越来越复杂，Web 用户开始对他们的在线体验寄予更多的期望。因此，苹果公司（Apple）在其计算机系统会议上创造了 “用户体验” 一词。

在 90 年代末期，浏览器大战中的大玩家（网景和微软）聚在一起对 HTML 发起了一场新的变革，即 逐步淘汰（弃用）展示性的 HTML 标签。同时，与 HTML 结构分离的级联样式表 概念随之到来，并且得到快速的推进。

1996 年，层叠样式表（CSS）面世，允许我们将 Web 页面的结构（HTML）和样式信息分开。样式规则可以保存在单独的文档（外部样式表，即.css文件）中，样式表（CSS）可以用来设置 HTML 标签元素的展示信息，比如颜色、布局和排版等。

HTML 和 CSS 是一组强大的组合，也将 Web 设计和开发推入到新的一个时代 。

与此同时，Web 动画紧随其后，Macromedia Flash 1.0 席卷了互联网。

但它并非没有缺点。动画只有在网站配备了 Flash 扩展插件时才能运行，否则动画会显示为空白。这给完全基于 Flash 构建的网站带来了严重的问题。此外，Web 动画的开发需要繁重的工作，而且页面加载速度较慢。

CSS 的诞生，让 Web 逐渐告别表格布局模式，开始迎来新的布局模式 ！

浮动、定位和框架布局模式

自 1996 年发布了第一个 CSS 建议之后，1998 年就发布了 CSS 第二版本（CSS 2.0），该版本提供了新的 Web 布局特性，比如定位（position ）。与此同时，随着 CSS 的到来，Web 页面才真正有了“美感”这么一说：

也是在这个时候（大约是 90 年代末、20 世纪初），表格布局开始用于其初衷（数据展示），随之在 Web 布局中涌现出很多新的布局模式。比如浮动布局 、定位布局 和 框架布局 等。

这里所说的框架布局是指 CSS Frameworks，而不是 HTML 中的框架标签！

浮动布局

浮动布局指的是使用 CSS 的浮动（float属性）特性来构建 Web 页面。它和 HTML 的表格（<table>）标签有点类似，它的初衷也不是用于 Web 布局的，是用来对 Web 进行排版的。即，用来处理文本围绕图片（或某个元素）的一种排版方式 ，就好比 Word 这样的排版软件中的排版方式，如下图所示：

只不过，广大的 CSSer 发挥其无穷的智慧，硬是将其用于 Web 的布局中，而且这种布局方式一度成为一种主流的布局方式，并且持续了很多年，甚至直到今天，还有不少的同学在使用浮动来布局。直到 Flexbox 布局的出现和移动端的兴起，浮动布局才慢慢的被其取替。

在 CSS 的布局模式当中，浮动布局经历的时期是最长的（至少到目前还没有什么方式超过它），持续了十多年的历史。在这个过程中，也积累了很多不同的布局方法。在早期，Web 开发人员主要采用 固定宽度 和 流式布局 两种布局方案来实现 Web 页面的布局。

在这个时期也演变出很多经典的布局。其中要属“圣杯 ”和“双飞翼 ”两者最为经典。这两种方法实现的都是以三列布局为主，而且两边的宽度是固定的，中间列是自适应，它们实现的效果是一样的，只是实现的思路不同。

定位布局

随着 CSS 的定位（position）属性的出现，Web 布局除了浮动布局之外，又新增了 定位布局 。这种方式的布局能让你快速达到想要的布局效果。当然也有很多同学直接尝试采用 PSD2HTML 这样的工具，直接将设计图转换成 Web 页面。虽然这种方式能快速实现 Web 布局的效果，但也受到很多的局限性：

需要明确指定元素的大小；

需要明确计算元素位置坐标；

难于维护。

或许其中还有很多其他不利的因素。因此，这样的布局也不算是一种好的布局模式，但对于不太懂 CSS 的同学而言，这是一种简单易懂的布局。

早期使用 PSD2HTML 的工具或软件（比如 Photoshop 或者 Firework 制图软件的切处导出的页面），基本上采用的都是定位布局。如今也有很多类似的工具，比如一些 AI 智能还图的运用，从设计稿中导出来的 HTML 和 CSS，不全是采用的定位布局。

框架布局

这里所说的框架布局，指的是 CSS Frameworks（CSS 框架），比如 Bootstrap！

随着这么多年的发展，现在大量的 Web 设计都是基于网格布局。虽然人们通常注意不到它，但事实上杂乱无章的布局时代确实已经过去了，现在是整齐结构化的天下。无论从理论、美学和整齐来说，这样的布局都很好平衡。网格结构是所有现代网站的基础，它最终总能给用户完美无暇的设计。

对于网格系统，其也经历了一个漫长的演变。表格布局虽然痛苦，但可以说表格是网格系统布局的最初模型。

正因为有表格布局的存在，才有了后面的 CSS 网格系统，不管是早期基于浮动完成的网格系统，还是后期依赖于 Flexbox 完成的网格系统。当然，你可能会说，网格系统的鼻祖不是 960gs？

虽然 960gs 是最早出现的网格系统（基于浮动布局），但其网格的思路是来源于表格的。因为表格具有明显的栅格风格，只不过是使用其它的布局方式，快速模拟了表格的风格，甚至是嵌套表格的风格。加上网格系统让 Web 的设计变得结构整齐、布局平衡等，受到众多设计师的青眯，也让 Web 开发者更易实现，并且可以依据此思路制定一套系统。基于此系统，可以快速完成 Web 布局，并且达到较好的效果，甚至还可以基于此系统制作工具，通过工具帮助大家快速完成布局。

网格框架中的网格系统，依旧是使用浮动或者后面出现的 Flexbox 构建的布局系统，它和原生的 CSS Grid 模块有着本质的区别！

响应式 Web 布局（RWD）

直到 20 年代初，Web 网站都是为桌面浏览器创建的。虽然在这个阶段，Web 开发者会采用不同的布局技术，比如流式布局（也常称百分比布局 ）让 Web 页面适配浏览器不同尺寸，但还未进入真正的 响应式 Web 设计时代。

哪怕是 Cameron Adams（@themaninblue）在他的博文《Resolution dependent layout》提出了基于屏幕分辨率来动态构建 Web 布局（使用 JavaScript 根据浏览器窗口大小加载不同 CSS 文件），也称不上是响应式 Web 布局。

虽然这种依赖动态分辨率布局的方案，可以在不同的分辨率下提供更佳的体验，但随着 2005 年 08 月 10 日 Opera 软件公司推出 Opera Mini ，和 2007 年 01 月 09 日第一台 iPhone 手机的出现，市场上不同品牌，不同分辨率的移动端以及品牌商自己的 Web 浏览器越来越多。

在这种环境之下，基于动态分辨率加载不同的样式表已不太现实，Web 开发者不得不想出其他的方案来适应不同的屏幕尺寸。

在很长一段时间，甚至到今日，为了适应不同屏幕的尺寸适配，为移动端单独创建一个网站，即移动子域名网站。比如 Facebook 的桌面版本和移动端版本，采用两个不同的域名来访问：

如此一来，开发人员要开发两个版本，相应的工作量就更大了，特别对于要快速响应和试错的 Web 应用来说，难度变得更大。

Web 开发人员为了能改善这种现象，在 2010 年的时候，Ethan Marcotte（@beep）基于 John Allsopp（@johnallsopp）的《网页设计的道（A Dao of Web Design）》，提出响应式 Web 设计思路（《Responsive Web Design》）。从此响应式 Web 设计（Responsive Web Design，简称 RWD ）的身影就出现在了公众面前。

Ethan Marcotte（@beep）在《Responsive Web Design》中提到：

响应式这个词源自于建筑学领域，原本指的是建筑物本身会“响应”实际的使用情况，来自我调整。在Web开发领域，“响应式”的意思就变成了，我们开发的 Web 页面会“响应”用户的设备尺寸而自动调整布局。在这篇文章中提到过，我们可以基于流体网格（Fluid Grids）、灵活的图片（Flexible Images）和媒体查询（Media Queries）三种技术来构建一个响应式 Web 网站或 Web 应用。

另外，Ethan Marcotte（@beep）构建了第一个具有响应式的 Web 网页，可以说是响应式 Web 设计经典案例之一（只可惜现在打不开了）：

内在 Web 设计（IWD）

内在的 Web 设计这个概念，是在 2018 年由 Jen Simmons 提出的，这个概念是 Web 设计中的一个新概念！她在 2018 年的 An Event Apart 大会上分享了该话题（该话题的 PPT请点击这里获取），她分享时曾表示：

我们现在正处于 Web 设计发展的另一个转折点，创意比增长更重要。

Jen 说，“内在 Web 设计”（“Intrinsic Web Design”）可能是 Web 设计历史上的新关键点，一切都在改变，在以技术和经验为基础，希望以最少的代码量来实现复杂的 Web 设计，或者说，Web 开发者希望在用最少的代码和复杂 Web 设计之间取得完美的平衡 。她意识到，以“内在 Web 设计”将可以把这种平衡趋向于完美。那么什么是内在 Web 设计？

什么是内在 Web 设计？

自从 Web 诞生以来，Web 开发者一直在使用大量的技巧来完成所有与布局有关的事情。无论是使用浮动（float）还是引用外部第三方 CSS 框架（CSS Frameworks）和库（比如Bootstrap）将内容放置在 Web 页面上想要的任何位置（即布局），几乎都有一些 Hack 的身影存在！

浮动的初衷是用于排版的，只不过在那个年代，Web 开发者利用其特性来构建 Web 的布局，而且运用于 Web 布局很多年。其中大多数第三方的 CSS 框架和库都是采用浮动来完成 Web 的布局！

然而，像 Flexbox 和 Grid 这样的 CSS 模块的出现，使我们能够正确构建我们想要的 Web 布局（设计），而且没有任何 Hack 代码、第三方 CSS 框架或 JavaScript 脚本（指完成 Web 布局方面）。从本质上讲：

能够以最少的 Hack 和技巧构建任何你想要的 Web 布局（或设计）！

也就是说，与将设计人员和开发人员都限制在 Web 的“预定义规则”中不同，内在 Web 设计（Intrinsic Web Design）使他们能够灵活地将传统的、久经考验的 Web 布局技术和现代布局方法和工具（比如 Flexbox、Grid等）结合起来，以便根据 Web 的内在内容创造独特的布局。

鼓励设计人员和开发人员将内容放在首位，并允许他们利用所有可用的布局技术和方法，以最佳方式在 Web 页面上显示内容，同时保持代码干净和更高效。用最简单的术语来说：

内在 Web 设计（Intrinsic Web Design）不是内容以设计为导向（Content Design-Driven），而是只专注于让设计受内容驱动（Design Content-Driven）。

通俗地说，直到现在，大多数的 Web 设计和布局都是以设计为导向，因为在构建 Web 布局时，都是基于设计师提供的设计稿（模板）来完成。因此，你不难发现，现存于线上的很多 Web 页面上的元素大小（尺寸）基本上都设置了固定的尺寸，而且这些尺寸是根据最初设计师提供的稿子定义的。

事实上呢？Web 的数据是动态的，服务端吐出的数据与最初设计稿内容有可能并不匹配（有多，也有少），此时呈现给用户的 Web 页面并不是最佳的（有可能很多空白空间未利用，有可能内容溢出容器，打破布局）。反之，Web 的内在尺寸设计就不同，在 Web 布局时，页面元素大小是根据真实内容（服务端吐出的数据）来决定的。

内在 Web 设计是 Web 布局的新时代，* 它***超越了响应式设计。我们正在使用** Web 本身作为一种媒介（设计受内容驱动），而不是试图模拟印刷设计（内容以设计为导向）。内在 Web 设计更为重要的是，不仅上下文的流畅，适应性高，还能够在 Web 布局和当前的 CSS 功能集上发挥真正的创造力 。

组件驱动式 Web 设计（CDWD）

组件驱动式 Web 设计被称为下一代响应式 Web 设计!

Web 生态是不断向前发展的。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此。这些变化，对于响应式 Web 设计的开发也有较大的改变。就在2021 年 Google 的 I/O 大会上，Una Kravets（@Una）提出新的响应式：组件驱动式 Web 设计（Component-Driven Web Design ，即 CDWD ）。

简单地说，组件驱动 Web 设计（Component-Driven Web Design），基于组件驱动的开发，即 CSS 新增的特性将直接基于组件而不是基于页面注入样式响应能力 。用下图来简单概述组件驱动式 Web 设计：

简要地说，我们使用 CSS 新特性可以做到：

响应用户的需求；

响应容器的需求；

响应外形的需求。

而且我们不再仅限于基于媒体查询来构建页面级的布局，还可以基于容器查询构建组件组的布局。这对于以往的布局来说，是质的变化。

2022 年及以后 CSS 布局技术

自从第一张 Web 页面诞生至今，Web 的布局已经经过了多次迭代：无布局 » 表格布局 » 浮动布局 » 框架布局 » 现代布局 » 未来布局：

整个布局演变过程中，有不同的名词来定义布局（一般根据采用的布局技术来命名）：

其中浮动布局（主要是 CSS 的 float 属性）技术曾也占据较长时间，在当初那个年代可以说是主流的布局技术，直到 Flexbox 的出现以及浏览器对 Flexbox 越来越完善时，浮动布局技术才被 Flexbox 布局技术替代下来。

虽然时下 Flexbox 布局技术是一个主流布局技术，但并不代表着 CSS 的浮动（float）就没有存在的必要了（有些布局效果还是离不开浮动的，比如不规则布局）。

随着 CSS 技术不断向前发展，尤其是这几年，可以用 Web 布局的特性明显增多：

正如上图所示，其中多列布局（Multi-column）和 Flexbox 已经是很成熟的技术，只不过多列布局（Multi-column）使用的较少，对于像 CSS 自定义属性、CSS 网格（它也很早就有了）、宽高比（aspect-ratio）、CSS 比较函数（min()、max() 和 clamp()）、CSS 逻辑属性、CSS书写模式和 CSS 视窗单位，是近两年才得到主流浏览器支持，其他很多特性对于 Web 开发者来说是“只闻其名，未见其身”。

换句话来说，时至今日，这些特性都可以用于 Web 布局当中，它们都是 Web 布局工具箱中的一员。在未来，我们还可以使用像子网格（subgrid）、容器查询和父选择器 :has() 等特性（这三个特性，已经得到部分主流浏览器的支持）。

如果你有关注过CSS相关的发展报告的话，你可能也知道，这几个 CSS 特性一直以来也是 CSSer 最为期待的三个特性，尤其是容器查询和父选择器：

也就是说，这些 CSS 特性已成为时下，或将成为 Web 布局的主流技术。

小结

历史是不断向前的，技术也是如此。虽然 CSS 在众多同学眼里是一件轻松的事情，但事实并非如此。正如此文所介绍的 CSS 实现 Web 布局，这就不是一件轻松的事情，很多工作两、三年的同学，都不一定能对 Web 布局实现达到手到擒来。

除此之外，在未来，Web 布局的模式将会越来越多，越来越强大，比如不久的将来，CSS Shapes 能帮助我们打破矩形的布局模式，CSS 的多列布局能让我们在 Web 中实现报纸排版的效果。或许还将会有其它的布局模式。

如果想彻底掌握上面提到这些布局模式，那么你需要对 CSS 有一定的基础了解。有了这些相关的基础，你会更好理解其中的一些概念和相关理论。如果你是初次接触 CSS，或者说对 CSS 了解还不足够深，那也无妨，因为我们接下来的内容将会带领大家一起来探讨现代 Web 布局技术。比如 Flexbox、Grid、容器查询等！

Web on Ther 的博客

现代 Web 布局 - (3) Flexbox 布局基础使用

Flexbox 布局简介

一些术语和概念

Flexbox 布局模块相关特性

控制 Flex 项目的方向

Flex 项目换行

Flex 项目排序

Flex 项目之间的间距

小结

现代 Web 布局 - (2) 现代 Web 布局技术术语

Web 坐标轴

容器和容器空间

间距

书写模式

逻辑属性

对齐方式

小结

现代 Web 布局 - (1) Web 布局技术演进：了解 Web 布局发展史

Web 布局演变过程

无任何布局模式

展示性的 HTML 标签

单一像素的 GIF 技巧

表格布局模式

浮动、定位和框架布局模式

浮动布局

定位布局

框架布局

响应式 Web 布局（RWD）

内在 Web 设计（IWD）

什么是内在 Web 设计？

组件驱动式 Web 设计（CDWD）

2022 年及以后 CSS 布局技术

小结