flexbox的基本概念

灵活框模块（通常称为flexbox）被设计为一维布局模型，并且是一种可以在界面中的项目之间提供空间分布并具有强大的对齐功能的方法。 本文概述了flexbox的主要功能，我们将在其余这些指南中对其进行更详细的探讨。

当我们将flexbox描述为一维时，我们所描述的事实是flexbox一次处理一个维度中的布局-无论是行还是列。 这可以与CSS网格布局的二维模型（可同时控制列和行）形成对比。

flexbox的两个轴

使用flexbox时，您需要考虑两个轴-主轴和横轴。 主轴由flex-direction属性定义，而横轴垂直于其延伸。 我们对flexbox所做的一切都涉及这些轴，因此值得一开始就了解它们的工作方式。

主轴

主轴由flex-direction定义，具有四个可能的值：

• row
• row-reverse
• column
• column-reverse

如果选择行或行反向，则主轴将沿行以内联方向运行。

选择“ column”或“ column-reverse”，您的主轴将在块的方向上从页面的顶部到底部。

横轴

交叉轴垂直于主轴，因此，如果您将伸缩方向（主轴）设置为行或行反向，则交叉轴沿列向下移动。

如果您的主轴是列或列反向，则交叉轴沿行延伸。

当我们开始着眼于对齐和调整弹性项目时，了解哪个轴是重要的； flexbox具有可沿一个轴或另一个轴对齐和对齐内容的属性。

起点和终点

理解的另一个重要领域是flexbox如何不假设文档的编写模式。 过去，CSS非常重视水平和左右书写模式。 现代的布局方法涵盖了书写模式的范围，因此我们不再假设一行文本将从文档的左上角开始向右行，而新行则在另一行之下出现。

您可以在以后的文章中了解有关flexbox和“书写模式”规范之间的关系的更多信息。 但是，以下描述应该有助于解释为什么我们在描述弹性布局的方向时不谈论左右，上下。

如果flex-direction是row并且我正在使用英语，则主轴的起始边缘将在左侧，而终止边缘将在右侧。

如果要使用阿拉伯语工作，则主轴的起始边缘将在右侧，而终止边缘将在左侧。

在这两种情况下，因为两种语言都有水平书写模式，所以横轴的起始边缘在flex容器的顶部，结束边缘在底部。

片刻之后，考虑开始和结束而不是左右就变得很自然，当您处理其他遵循相同模式的布局方法（例如CSS Grid Layout）时，对您很有用。

伸缩容器

使用flexbox布置的文档区域称为flex容器。 要创建flex容器，我们将区域的容器的display属性的值设置为flex或inline-flex。 一旦执行此操作，该容器的直接子代将变为弹性项。 与CSS中的所有属性一样，都定义了一些初始值，因此在创建Flex容器时，所有包含的flex项目将以以下方式运行。

• 项目显示在一行中（flex-direction属性的默认值为row）。
• 这些项目从主轴的起始边缘开始。
• 这些项目不会在主要尺寸上拉伸，但会收缩。
• 这些项目将拉伸以填充交叉轴的大小。
• flex-basis属性设置为auto。
• flex-wrap属性设置为nowrap。

这样的结果是，您所有的项目都将连续排列，使用内容的大小作为主轴上的大小。 如果容器中容纳的物品过多，它们将不会包裹而会溢出。 如果某些物品比其他物品高，则所有物品都将沿横轴拉伸以填充其全部大小。

您可以在下面的实时示例中看到其外观。 尝试编辑项目或添加其他项目，以测试flexbox的初始行为。

改变flex-direction

在flex容器中添加flex-direction属性可以让我们更改flex项的显示方向。 设置弹性方向：行反向将使项目沿行显示，但是开始行和结束行被切换。
如果我们将弹性方向更改为列，则主轴开关和项目现在将显示在列中。 设置列反转，然后再次切换开始和结束行。
下面的实时示例将flex-direction设置为row-reverse。 尝试其他值（行，列和列反转）以查看内容发生了什么。

多行Flex容器带flex-wrap

虽然flexbox是一维模型，但有可能导致我们的flex项目包装到多行上。 这样做时，您应该将每一行视为一个新的flex容器。 任何空间分布都将跨越该线发生，而无需参考任一侧的线。

要引起wrap行为，请为属性flex-wrap添加wrap值。 现在，如果您的商品太大而不能全部显示在一行中，它们将换行到另一行。 下面的实时示例包含已指定宽度的项目，这些项目的总宽度对于flex容器而言太宽。 将flex-wrap设置为wrap时，项目将包装。 将其设置为nowrap，这也是初始值，它们将收缩以适合容器，因为它们使用的初始flexbox值允许项收缩。 如果项目无法收缩，或者收缩得无法容纳得足够小，则使用nowrap会导致溢出。

flex-flow 速记

您可以将flex-direction和flex-wrap这两个属性组合为flex-flow的简写形式。 指定的第一个值是flex-direction，第二个值是flex-wrap。
下面的实时示例中，尝试将第一个值更改为flex-direction的允许值之一-行，行反向，列或列反向，并将第二个值更改为wrap和nowrap。

应用于弹性项目的属性

为了更好地控制弹性商品，我们可以直接将其定位。 我们通过三个属性来执行此操作：

• flex-grow
• flex-shrink
• flex-basis
  在本概述中，我们将简要介绍这些属性，您可以在《控制主轴上的弹性项目的比率》指南中获得更全面的了解。

在我们理解这些属性之前，我们需要考虑可用空间的概念。 更改这些flex属性的值时，我们正在做的是更改可用空间在项目之间分配的方式。 当我们考虑对齐项目时，可用空间的概念也很重要。
如果我们在一个500像素宽的容器中有3个100像素宽的项目，那么我们需要布置项目的空间为300像素。 剩下200像素的可用空间。 如果我们不更改初始值，则flexbox会在最后一项之后放置该空格。

相反，如果我们希望项目增加并填充空间，那么我们需要一种在项目之间分配剩余空间的方法。 这就是我们将应用于这些项目本身的flex属性。

flex-basis 属性

flex-basis是根据项目作为可用空间留下的空间来定义该项目的大小的方法。 此属性的初始值为auto-在这种情况下，浏览器将查看项目是否具有尺寸。 在上面的示例中，所有项目的宽度均为100像素，因此将其用作可伸缩基础。
如果项目没有大小，则将内容的大小用作伸缩基础。 这就是为什么当我们只在父级上声明display：flex以创建flex项目时，这些项目全部移入一行并且仅占用它们显示内容所需要的空间的原因。

flex-grow 属性

将flex-grow属性设置为正整数后，flex项可以从其flex-basis沿主轴增长。 这将导致该项目拉伸并占用该轴上的任何可用空间，如果允许其他项目也增长，则将占可用空间的一部分。

如果我们将示例中的所有项目的flex-grow值都设置为1，则flex容器中的可用空间将在我们的项目之间平均分配，并且它们将拉伸以填充主轴上的容器。

flex-grow属性可用于按比例分配空间。 如果我们给第一个项目的flex-grow值设置为2，将其他项目的flex-grow值设置为1，则将为第一项设置2个部分（在上面的示例中为200像素中的100像素），彼此为1部分 2个（200个像素中的50个像素）。

flex-shrink 属性

如果flex-grow属性用于在主轴上增加空间，则flex-shrink属性控制如何将其移除。 如果容器中没有足够的空间来布置项目，并且flex-shrink设置为正整数，则该项目可能会比flex-basis小。 与flex-grow一样，可以分配不同的值以使一个项目比其他项目更快地收缩-为flex-shrink设置更高的值的项目将比其具有较低值的同级项目更快地收缩。

在计算实际发生的收缩量时，将考虑项目的最小尺寸，这意味着柔韧性收缩的行为可能会比柔韧性增长的一致性降低。 因此，我们将在文章“沿主轴控制项目的比率”中更详细地介绍该算法的工作原理。

flex属性的简写值

您很少会看到单独使用flex-grow，flex-shrink和flex-basis属性的情况。 而是将它们合并为flex速记。 flex简写允许您按此顺序设置三个值-flex-grow，flex-shrink，flex-basis。

下面的实时示例使您可以测试flex速记的不同值； 请记住，第一个值是flex-grow。 赋予正值表示该商品可以增长。 第二个是flex-shrink-值为正值时，项目可以收缩，但前提是它们的总值超出主轴。 最终值为flex-basis； 这是项目使用的值作为增长和收缩的基础值。

还有一些预定义的速记值可以覆盖大多数用例。 您会经常在教程中看到这些内容，在很多情况下，这些都是您需要使用的。 预定义值如下：

• flex: initial
• flex: auto
• flex: none
• flex:
  设置flex：initial将项目重置为Flexbox的初始值。 这与flex：0 1 auto相同。 在这种情况下，flex-grow的值为0，因此项目的增长不会超过其flex-basis的大小。 flex-shrink的值为1，因此项目可以收缩而不是溢出。 flex-basis的值为auto。 项目将使用在主维度中项目上设置的任何大小，或者从内容大小中获取它们的大小。
  使用flex：auto等同于使用flex：1 1 auto; 一切都与flex：initial相同，但是在这种情况下，项目可以增长并填充容器，并在需要时收缩。
  使用flex：没有一个将创建完全不灵活的flex项目。 就像您编写了flex：0 0 auto一样。 这些项目无法增长或缩小，但将使用具有flex基础的flexbox进行布局。
  您在教程中经常看到的简写是flex：1或flex：2，依此类推。 就像您使用flex一样：1 10。项目可以从flex的基础0开始增加和减少。

在下面的实时示例中尝试这些速记值。

物品之间自由空间的对齐，调整和分配

flexbox的一项关键功能是能够对齐和对齐主轴和十字轴上的项目，以及在flex项目之间分配空间。

align-items

align-items属性将使横轴上的项目对齐。

此属性的初始值为Stretch，这就是为什么弹性项目默认拉伸到最高项目的高度的原因。 实际上，它们正在拉伸以填充flex容器-最高的项目定义了容器的高度。

您可以改为将align-items设置为flex-start，以使项目在flex容器的开始处对齐，flex-end将其对齐到末尾，或居中以将它们居中对齐。 在实际示例中尝试一下–我给flex容器指定了一个高度，以便您可以查看如何在容器内部移动项目。 看看将align-items的值设置为：

justify-content

justify-content属性用于在主轴上对齐项目，该方向是flex-direction设置流程的方向。 初始值为flex-start，它将在容器的开始边缘对齐项目，但是您也可以将值设置为flex-end以在末尾对齐它们，或将其居中以在中心对齐。

您还可以使用居间之间的值来分配物料后的所有备用空间，并在各个物料之间平均分配，以便每个物料之间有相等的空间。 要在每个项目的左右两边留出相等的空间，请使用space-around值。 有了空格，项目的两端都留出一半大小的空间。 或者，要使项目周围有相等的空间，请均匀使用值space。 在空间均匀的情况下，项目的两端都有全尺寸空间。
在实际示例中尝试以下justify-content值：

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly
  
  在“在Flex容器中对齐项目”一文中，我们将更深入地研究这些属性，以便更好地了解它们的工作方式。 但是，这些简单的示例将在大多数用例中有用。