Flexbox 简介

学习 Flexbox 可能会让人感到头疼。对大多数人来说，刚开始时并不特别有趣。它要求你重新思考过去在 CSS 中处理布局的方式。

别担心，我会一步步带你掌握所有你需要了解的内容。那么，我们开始吧。

为什么要使用 Flexbox？

近年来，CSS 发展迅速。设计师们非常喜欢滤镜、过渡和变换等新功能的引入。但仍然缺少了一些东西——那是我们所有人都渴望的。

用 CSS 构建智能页面布局的问题长期存在，这迫使许多人编写冗余且难以维护的 CSS 代码。

我们总是不得不应对浮动（float）、表格显示技巧以及它们带来的各种副作用。如果你写过一段时间的 CSS，应该能感同身受。如果还没有，欢迎进入一个更美好的世界！

作为设计师和前端开发者，我们的期待终于得到了回应，而且是以一种非常优雅的方式。

现在，我们可以彻底告别那些繁琐的 CSS 技巧了。不再需要频繁使用 float，也不再需要依赖 table-cell 显示方式。

是时候拥抱一种更简洁、现代的语法来构建智能布局了。欢迎来到 CSS Flexbox 模型。

什么是 Flexbox？

根据规范描述，Flexbox 模型提供了一种高效的方式来布局、对齐和分配文档中元素之间的空间，即使视口大小或元素尺寸是动态变化的或未知的。

如果听起来太正式，我完全理解你的感受。稍后我会用大白话解释它的真正含义。

无论你是梦里都在写 CSS，还是刚刚入门，都会觉得如鱼得水。

我该如何开始使用 Flexbox 模型？

这是每个人最初都会问的问题，而答案其实比你想象的要简单得多。

要开始使用 Flexbox 模型，你只需要做一件事：定义一个 弹性容器（flex-container）。

好吧，刚才那句话是不是让你更困惑了？让我来解释一下。

在普通的 HTML 中，布局一个简单的项目列表通常是这样的形式：

1<ul> <!--父元素-->
2  <li></li> <!--第一个子元素-->
3  <li></li> <!--第二个子元素-->
4  <li></li> <!--第三个子元素-->
5</ul>

如果你仔细看，就会发现无序列表 ul 包含了多个列表项 li。

你会把 ul 称为父元素，li 称为子元素。

要使用 Flexbox 模型，你需要将某个父元素设置为 弹性容器（也叫灵活容器）。

这只需通过给该元素设置 display: flex 或 display: inline-flex（用于行内变体）即可实现。就这么简单，之后你就可以开始使用 Flexbox 模型了。

我说过，它并没有你想象中那么难。

通过设置 display: flex 或 inline-flex，让某个父元素成为 弹性容器

以一个无序列表和多个列表项为例，下面是启动 Flexbox 格式化上下文的样子：

1/* 将父元素设为弹性容器 */
2ul {
3  display: flex; /* 或者 inline-flex */
4}

再稍微给列表项添加一些样式，以便你能清楚地看到效果。

1li {
2  width: 100px;
3  height: 100px;
4  background-color: #8cacea;
5  margin: 8px;
6}

你最终应该看到的效果如下：

你可能没注意到，但已经发生了变化：Flexbox 格式化上下文已经启动。

记得，默认情况下，CSS 中的 div 是垂直堆叠的，从上到下排列。

上图是你可能期望的结果。然而，仅仅加入这一行代码 display: flex，你就立刻看到了布局的变化。

列表项现在变成了从左到右水平排列，就像你用了 float 一样。

只要在任意父元素上设置了 display: flex，Flexbox 模型就会立即生效。

你可能还不明白为什么列表项的方向突然变了。我保证很快就会深入讲解其中原理。现在，先保持信任即可。

还有一点需要特别提醒你注意。

一旦你将 display 属性设为 flex，无序列表就自动变成了 弹性容器，而它的子元素（即这里的 li 元素）则变成了 弹性项目（flex items）。

这些术语会在接下来的讲解中反复出现，帮助你理解 Flexbox 模型的更多强大功能。

我用了两个关键术语，现在我要重点强调它们，因为它们是理解后续内容的基础。

1. 弹性容器：你设置了 display: flex 的父元素。
2. 弹性项目：位于弹性容器内的子元素。

弹性容器：包含弹性项目的父元素

**弹性项目**：弹性容器的子元素（单数或复数）

这是掌握 Flexbox 模型的基础。一旦理解了这一点，后面还有更多精彩内容等着你。

到这里，关于 Flexbox 模型的入门介绍就结束了。