CSS Flexbox 容器属性的长短概述

布局很难。而使用浮动元素更是麻烦得要命。

但是，如果我们有一种行之有效的响应式布局编写方法呢？Flexbox 应运而生。

什么是 Flexbox

Flexbox 是一种在网页上对齐内容的方法。它使元素能够轻松缩小和放大，并包含许多独特的 CSS 属性，从而大大简化了响应式设计。

如果你打算使用二维布局，Flexbox 可能不太适合你。Flexbox 最适合用于一维布局，在这种布局中，你需要组织和实现许多不同的元素，并使其具有响应式布局。

家庭事务

Flexbox 非常依赖父子关系。你必须有一个容器，然后将布局中的所有不同元素都放入其中。

上图展示了一个基本布局，其中包含一个容器，可以容纳三个不同的元素。这三个元素可以是任何东西——图片、侧边栏、网站的全部主要内容——完全取决于您。您只需确保它们都包含在一个容器内，即可开始充分利用 Flexbox 的全部功能。

本文仅介绍容器属性。本周晚些时候，我们将发布一篇关于项目/子元素属性的文章，敬请期待！

柔性容器

所以在进行任何操作之前，你需要将容器设置为 ` <flex-item> display:flex`。这会告诉计算机这是一个可折叠项目。顺便一提，这应该会让你的项目并排排列。例如，如果你的项目看起来像这样（没有 ` display:flex:`），那么现在应该可以了。

最终效果会像这样display:flex：

当然，这其中也存在一些限制。我的图片添加了边距，但没有设置宽度。如果您设置了宽度，情况就会有所不同。我最大的建议是多尝试，找到最适合您的设置。

容器特定属性

我们来谈谈如何操作容器。现在它变得灵活了，我们有了不同的选择，可以对它进行各种操作。

flex-direction
这定义了容器堆叠物品的方向。您可以为该属性赋予以下不同的值：

• flex-direction: row;- 默认选项，项目水平从左到右排列
• flex-direction: row-reverse;项目从右到左水平排列
• flex-direction: column;将物品垂直堆叠
• flex-direction: column-reverse;- 垂直堆叠，但这次是从下往上堆叠

我尽量用最简单的方式解释，但如果你和我一样，听起来还是像一堆胡言乱语。所以我决定用我那些方便的图表来更直观地解释一下：

flex-direction: row;：

flex-direction: row-reverse;：

flex-direction: column;：

flex-direction: column-reverse;：

希望你现在对 flex-direction 的作用有了基本的了解。接下来，我们来看另一个属性……

flex-wrap
这指定了项目是否应该换行——使用 `--wrap` nowrap，项目将保持在同一行；使用 `--wrap` wrap，它们将另起一行。还有一个有趣的选项叫做wrap-reverse`--wrap`，它会使项目换行，但方向相反。

我们来画一些图表：

flex-wrap: nowrap;：

flex-wrap: wrap;：

设置为 0 时wrap，间距和项目将适应屏幕尺寸。设置为 0 时nowrap，项目将溢出屏幕（如上图所示）。

就是这样flex-wrap！简单却又如此强大。接下来……

justify-content
简而言之，此属性用于在容器中水平对齐项目。它包含以下值：

• justify-content: flex-start;- 默认情况下，将项目对齐到容器的开头。
• justify-content: flex-end;- 将项目对齐到容器的末尾
• justify-content: center;将项目对齐到容器中心。
• justify-content: space-around;- 在项目之前、之后和之间留出空间
• justify-content: space-between;- 物品之间留出空隙

你都明白了吗？这些数值的含义其实不言自明，但我还是觉得需要图表，因为我喜欢把它们拼凑起来。（没错，有些数值可能和以前一样。有时候它们正好匹配。）

justify-content: flex-start;：

justify-content: flex-end;：

justify-content: center;：

justify-content: space-around;

justify-content: space-between;

space-around两者之间的区别space-between虽然很小，但正如你所见，它仍然会产生很大的影响。务必确保你使用的属性最适合你想要实现的目标！

align-items
“等等，”我仿佛听到你在惊呼，“我们刚才不是还讨论过如何将项目与……对齐吗justify-content？”

是的，我们确实这么做了。但它align-items是将项目垂直排列，而不是水平排列。非常实用，对吧？我们需要稍微修改一下图表，但首先让我们概览一下这些值。

• align-items: center;- 将物品垂直对齐到容器中心。
• align-items: flex-start;- 将项目对齐到容器顶部
• align-items: flex-end;- 将物品对齐到容器底部
• align-items: stretch;将物品拉伸至相同大小并装满容器
• align-items: baseline;- 将元素与它们内部文本的基线对齐

这绝对是我最困惑的属性，所以我试图把它分解成基本组成部分。我们来画图吧。

align-items: center;

align-items: flex-start;

align-items: flex-end;

align-items: stretch;

align-items: baseline;

如您所见，我实际上添加了一条虚线基线，这样我们就能知道对齐的位置在哪里了。

希望我已经正确地涵盖了这一点。

接下来，我们去看看另一处听起来类似的房产：

align-content
这是用来对齐弹性线的。没错。这基本上和上面的操作一样，只不过我们不是直接操作元素，而是操作弹性线。

现在，我不会详细讨论这些数值。这次也不用图表，因为所有数值都与之前的justify-content数值非常相似。

我们还是坚持用清单的形式吧。

• align-content: space-between;- 在柔性线之间留出相等的间距
• align-content: space-around;- 在柔性线周围留出等距空间（而不仅仅是线之间）
• align-content: stretch;- 拉伸软管以填充可用空间
• align-content: center;- 将柔性线条居中放置在容器中央
• align-content: flex-start;- 将弹性线对齐到容器的起始位置（左侧）。
• align-content: flex-end;- 将柔性线对齐到容器的末端（右侧）。

以上就是大致内容。说实话，如果你需要更直观的理解，可以看看本justify-content节下面的图表——它们提供的概览与本文相同。

结论

嗯，这很有趣。如果你已经看到这里，应该对如何使用 Flexbox 设置容器样式有了大致的了解。再次强烈建议你打开 CodePen，随意摆弄一些 div 和 box 元素，感受一下 Flexbox 的运作方式——我自己也花了不少时间摸索。

我的意思是，嘿，如果你想看看，这是链接：

本周晚些时候，我还会写一些关于子属性的文章！这样我们就能面面俱到，也不会占用您太多时间。

在那之前，祝各位宝贝编程愉快！<3