对初学者Flexbox的友好介绍

CSS Flexbox：一维布局利器

Flexbox，即弹性盒布局模块，是CSS中用于创建一维布局（例如一系列相似项目）的强大工具。它尤其适用于单行或单列的布局，并且可以作为旧版浏览器中Grid布局的可靠替代方案。本文将为您提供一个易于理解的Flexbox入门指南。

尽管CSS Grid布局的出现，Flexbox仍然具有其独特的价值。两者虽然存在一些功能重叠，但它们在CSS布局中扮演着不同的角色。一般来说，Flexbox更适合一维布局（例如，一系列相似项目），而Grid则更适合二维布局（例如整个页面的元素）。

然而，Flexbox 也可以用于全页面布局，因此在不支持Grid的浏览器中，它可以作为Grid布局的有效备选方案。（虽然Grid在大多数现代浏览器中的支持度已经迅速提高，但Flexbox的支持范围仍然更广，如果您需要布局在一些较旧的浏览器中也能正常工作，这一点非常实用。）

Flexbox 的优势

Flexbox 的一些优势包括：

• 页面内容可以向任何方向布局（向左、向右、向下甚至向上）。
• 内容片段的视觉顺序可以反转或重新排列。
• 项目可以“灵活”调整大小以响应可用空间，并可以相对于其容器或彼此对齐。
• 创建等宽列布局（无论每列中的内容量多少）都非常容易。

为了说明各种属性和可能性，让我们假设以下简单的布局，作为本文中一些演示的示例：

<code class="language-html"><div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div></code>

第一步是将元素放置在.main内，即<nav></nav>和<aside></aside>，并排显示。如果没有Flexbox，我们可能会使用浮动来排列这三个元素，但这并不会非常直接。此外，传统的方法会带来一个众所周知的问题：每一列的高度都与其内容高度相同。因此，您需要为所有三列设置相同的高度才能使它们长度一致，或者使用某种技巧。

Flexbox 应运而生。

开始使用Flexbox

Flexbox的核心是display属性的flex值，需要将其设置为容器元素。这样做会将它的子元素变成“弹性项目”。这些项目默认会获得一些方便的属性。例如，它们会并排放置，并且没有指定宽度的元素会自动占据剩余空间。

因此，如果您将.main的display设置为flex，它的.content子元素会自动挤在<nav></nav>和<aside></aside>之间。无需任何计算，是不是很方便？作为额外奖励，这三个元素会神奇地具有相同的高度。

<code class="language-html"><div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div></code>

元素顺序：Flexbox order 属性

Flexbox的另一个属性是可以轻松更改元素的顺序。假设您为客户构建了上述布局，而她现在希望.content出现在<nav></nav>之前。

通常，您需要深入HTML源代码并更改那里的顺序。使用Flexbox，您可以完全通过CSS来完成此任务。只需将.content的order属性设置为-1，内容列就会排在前面。

<code class="language-css">.main {
  display: flex;
}</code>

在这种情况下，您不需要为其他列显式声明order值。

使用Flexbox独立于CSS样式的HTML源代码

但您的客户还不满意。她希望<footer></footer>成为页面上的第一个元素，甚至在<header></header>之前。好吧，Flexbox再次成为您的朋友（尽管在这种情况下，也许最好教育您的客户而不是一味顺从）。由于您需要重新排列内部元素和外部元素，因此必须为<div>设置<code>display: flex规则。请注意，您可以将Flex容器嵌套在网页中以实现您想要的结果。因为<header></header>、<main></main>和<footer></footer>是垂直堆叠的，所以您需要首先设置一个垂直上下文，您可以使用flex-direction: column快速完成此操作。此外，<footer></footer>的order值为-1，因此它将首先出现在页面上。就这么简单。

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

因此，如果您想将一行元素更改为一列或反之亦然，您可以使用flex-direction属性并将其设置为column或row（row是默认值）：

但是，能力越大，责任越大：请记住，许多访问者将使用键盘来浏览您基于Flexbox的网站，因此，如果HTML源代码中的元素顺序与屏幕上显示的顺序不符，则可访问性可能会成为一个严重的问题。

如何使用Flexbox对齐项目

Flexbox还可以非常直接地水平和垂直对齐其子元素。

您可以使用align-items对Flex容器内的所有元素应用相同的对齐方式。如果您希望为各个项目设置不同的对齐方式，请使用align-self。元素的对齐方式取决于flex-direction属性的值。如果其值为row（即元素水平排列），则对齐方式应用于垂直轴。如果flex-direction设置为column（即元素垂直排列），则它应用于水平轴。

例如，您有一些形状，您希望在容器元素内以不同的方式对齐它们。您需要：

• 将每个形状的align-self属性设置为适当的值。可能的值包括：center、stretch（元素定位以适应其容器）、flex-start、flex-end和baseline（元素定位在其容器的基线处）。
• 将容器元素设置为display: flex。
• 最后，请注意父容器上的flex-direction属性，因为它的值会影响子元素的对齐方式。

<code class="language-html"><div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div></code>

如果父容器内的所有元素都需要以相同的方式对齐，则可以在父容器中使用align-items属性。可能的值包括center、flex-start、flex-end、stretch（默认值：项目被拉伸以适应其容器）和baseline（项目定位在其容器的基线处）。

<code class="language-css">.main {
  display: flex;
}</code>

使用Flexbox对齐内容

另一个对齐属性是justify-content，当您希望在多个元素之间平均分配可用空间时，它非常方便。

可接受的值包括：center、flex-start、flex-end、space-between（项目之间有空格）和space-around（项目之前、之间和之后都有空格）。

例如，在您一直使用的简单HTML模板中的<main></main>元素内，您可以找到三个元素：<nav></nav>、.content和<aside></aside>。目前，它们都被推到页面的左侧。如果您希望以某种方式显示这三个元素，以便在它们之间创建一些空间，而不是在第一个和最后一个元素的左端和右端分别创建空间，请将.main（它们的父容器）内的justify-content设置为space-between：

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

使用Flexbox调整项目尺寸

使用flex属性，您可以控制元素相对于Flex容器内其他元素的长度。

此属性是以下各个属性的简写：

• flex-grow — 指定元素相对于其他弹性元素增长多少的数字。
• flex-shrink — 指定元素相对于其他弹性元素收缩多少的数字。
• flex-basis — 元素的长度。可接受的值包括：auto、inherit或后跟“%”、“px”、“em”或任何其他长度单位的数字。

例如，要获得三列等宽列，只需为每列设置flex: 1即可：

<code class="language-css">.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}</code>

如果您需要内容区域的宽度是<nav></nav>和<aside></aside>的两倍，请为.content设置flex: 2，并将其他两个保留为1：

更多资源

结论

如您所见，如果您需要控制网站上元素的位置，Flexbox可以使我们的生活轻松得多。它非常可靠，使我们每天必须处理的任何技巧、折叠容器或其他奇怪的东西都过时了。

如前所述，如今用于全页面布局的更好选择是CSS Grid，但仍然值得了解Flexbox的功能范围。Flexbox最适合在一维中对齐相关项目，但如果需要，它也可以作为在较旧浏览器中Grid工作的便捷备选方案。

关于CSS Flexbox的常见问题解答（FAQ）

（此处应添加常见问题的解答，与原文档保持一致）