CSS Flexbox #1。 创建你的第一个 Flexbox 布局
已发表: 2022-02-162018 年底，我们出版了一本关于 CSS Grid 的书，这是一款正在彻底改变前端网页设计的布局工具。 CSS Grid 完全是 CSS 原生的，允许您使用列和行创建基于网格的布局系统。
《CSS Grid Explained》立即成为我们最畅销的书籍之一。 因此，我们正在为该书进行大规模更新和扩展。 我们还开始制作一本新书“Flexbox Explained”。 Flexbox 与 CSS Grid 密切相关，但也有明显的区别：
- Flexbox 是一种一维布局模型。 它可以管理列或行。
- CSS Grid 是一种二维布局模型。 它可以管理列和行。
在接下来的几周内，我们将在编写“Flexbox Explained”时发布一系列 Flexbox 教程。 第一个教程通过实际示例演示了 CSS Flexbox 的基本概念。
Flexbox 简介
CSS Flexbox 规范描述了在容器 ( flex-container ) 中包含项目 ( flex-items ) 的布局。 根据可用的容器空间，这些项目的宽度和/或高度可以增加或缩小。 项目“灵活”以尽可能最佳的方式适合父容器。
这些“弯曲”的项目可以在任何方向（内联轴或块轴）布置，因此在更改屏幕的大小（宽度或高度）或其方向时提供了很大的灵活性。
您可以通过单击此链接查看 Flexbox W3C 规范。
步骤1。 创建 HTML
让我们通过使用一些示例代码创建一个 HTML 文件来开始这个示例。 我为你准备了一些 HTML - 它是一个包含 3 个子元素的容器。
- 打开您喜欢的代码编辑器。
- 创建一个空的 HTML 文件。
- 访问此页面并复制 HTML 代码
- 将该代码粘贴到您的 HTML 文件中。
第2步。 创建 CSS
现在我们有了一个包含 3 个元素的容器，让我们添加一些样式。
- 创建一个名为style.css 的 CSS 文件。 . 将此文件放在与 HTML 文件相同的文件夹中。 此 CSS 文件的链接已在您的 HTML 文件的标记中
- 复制并粘贴此代码，该代码也可在 Codepen 上找到：
/* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }此图显示了当您在浏览器中打开 HTML 文件时您的代码将如何显示。 3 个子项与其父容器一样宽。 高度由每个项目的内容决定。 注意所有边的 2rem （在桌面屏幕上约为 32px）的填充。
步骤#3。 CSS Flexbox 样式
现在是时候开始本教程的 Flexbox 部分了。
- 编辑 CSS 文件并添加以下代码：
.container { display: flex; }此图像显示了您的代码现在的外观：
发生了什么变化？ 在技术方面，父容器现在是一个flex-container 。 子元素已变成flex-items 。
为什么容器的大小发生了变化？ 弹性项目不像它们的父容器那么宽。 它们现在与它们内部的内容一样宽。 flex-items显示为左侧的浮动元素。 它们的行为类似于内联元素。
要清楚地看到父容器的宽度，您可以应用background-color ：
- 编辑 CSS 代码并添加以下代码：
.container { display: flex; background-color: #f5ca3c; }下面是容器现在的显示方式：
您已经注意到flex-container行为（大部分）类似于块级元素。 然而，我们也让容器表现得像一个内联元素。 为此，我们将display属性的值更改为inline-flex 。
- 编辑 CSS 代码：
.container { display: inline-flex; background-color: #f5ca3c;
flex 容器现在是一个内联级元素，如下图所示：
在继续本教程之前，让我们将行为更改为块级元素。
- 编辑 CSS 代码：
.container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }步骤4。 将 Flexbox 行更改为列
到目前为止，我们已经创建了一个flex-container 。 我们还看到了这个容器的孩子在变成flex-items时的行为。
现在让我们学习如何改变布局的方向。 flex-container的默认方向是基于行的。 但是，您可以使用flex-direction属性更改此行为。
- 编辑 CSS 代码：
.container { display: flex; background-color: #f5ca3c; flex-direction: row; } 更新代码后，您不会看到任何变化，因为flex-direction: row是默认值。 让我们做一个真正可见的更改：将flex-container的方向编辑为column 。
- 编辑 CSS 代码：
.container { display: flex; background-color: #f5ca3c; flex-direction: column; }下一张图片显示了布局的变化：
现在flex-container的方向基于块轴（列）。 flex-items从上到下对齐，每个项目都占据其父容器的整个宽度。 因此，它们的行为类似于块元素。
现在，您可能会在这一点上开始质疑：“嘿，我的布局现在看起来与本教程中的第一个布局完全相同！ ”这是真的。 从视觉上看，这个带有flex-container的当前布局和这个例子的第一个带有块容器的布局之间没有区别。
但是，我们现在有了更多的控制权。 例如，您可以使用row-reverse和column-reverse属性反转flex-items的方向。
- 编辑 CSS 代码：
.container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }此图显示了您的布局在此新更新后的外观：
要查看连续反转的flex-items ，请更改flex-direction属性的值。
- 编辑 CSS 代码：
.container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }
弹性盒总结
恭喜！ 你已经学会了如何声明一个flex-container 。 您已经看到flex-items行为取决于应用于其父容器（ row或column ）的flex-direction 。 你也知道如何颠倒flex-items的顺序。
所有这些更改都是使用 CSS 完成的，因此不会影响您网站的 HTML 标记的结构。 这是使用 Flexbox 的优势之一。 反转flex-items的顺序只是这个 CSS 模块的特性之一。 有关 Flexbox 的知识还有很多，因此请在几天后查看本教程的第 2 部分。
本系列更多教程
- CSS 弹性盒 #2。 如何使用 justify-content 属性
- CSS 弹性盒 #3。 align-items 属性
- CSS 弹性盒 #4。 flex-grow 属性