什么是flexbox（为什么要使用它）

您可以整天构建干净的部分，但是每个屏幕尺寸的元素比对齐元素开始感觉更像是试验和错误，而不是故意的设计。

Flexbox修复了这一点。它使您可以真正控制元素如何坐，拉伸，收缩和包裹容器内部，而不会不断调整边距和填充物。在本指南中，我们将分解Flexbox的工作原理，简化布局的方式以及如何在Divi 5中视觉使用而无需编写一行代码。

什么是flexbox

Flexbox（用于灵活盒布局的缩写）是一个布局模型，可简化元素如何在容器中对齐和空间空间。 Flexbox不用使用边距或固定宽度手动定位每个项目，而是让您定义这些元素应取决于可用空间的行为。

元素应该增长以填补额外的空间吗？缩小空间时收缩？当他们不再适合时，他们应该将其包裹在下一行吗？您可以通过应用于容器及其孩子的一组属性做出这些选择。这就是您决定布局应如何响应的方式。

让我们以实用的例子来理解这一点。假设您在水平行内有三个按钮。使用Flexbox，您可以将它们均匀地集中在容器中：

确定中间按钮应比其他按钮更多的空间：

或者，当屏幕变窄时，您可能希望按钮自动堆叠：

Flexbox通过简单的属性，例如合理性，flex-wrap和Flex Groow，使所有这些都成为可能。

此外，它使您可以控制项目的间隔，在不同的轴上对齐并在视觉上排序，而无需更改其在构建器中的实际位置。您可以将内容中心，将其推到容器的顶部或底部，与其他项目对齐，甚至在断点上扭转整个订单。

您可能会想：我不能用边距和填充做到这一点吗？

你说得对。您可以手动中心元素或使用自定义宽度调整大小。但是，这些方法依赖于单独定位每个项目。每个屏幕尺寸一次调整每个元素。

Flexbox完全改变了该过程。它不用分别处理每个元素，而是让您在容器级别定义布局规则。您告诉容器在不同的情况下其孩子应表现如何，并根据需要调整他们。

这种方法使布局更加一致，更易于管理，并且随着设计的发展而更加灵活，尤其是当屏幕尺寸更改或添加新模块时。

挠曲方向如何影响对齐

您在Flexbox中做出的第一个选择之一是元素应在行或列中流动的方向。弹性方向属性设置了这一点，并定义了项目如何在容器中对齐，包装和空间。

让我们更好地理解这一点，因为诸如合理性和对齐的常见属性完全取决于设置哪个方向。它们不能在浏览器的默认布局上工作，而是由Flexbox创建的轴：主轴和横轴。主轴遵循您设置的方向，该方向是flex方向：行的水平，垂直方向。横轴采用另一种方式：行的垂直行，水平的列。

因此，当将方向设置为行时，主轴将从向右运行。这意味着合理的内容会在整个行上移动元素，并且对齐项目控制它们如何在该行中垂直对齐。

当您将方向切换到列时，整个对齐逻辑翻转。现在，主轴运行到底部，这意味着垂直对准项目的合理性对齐，并且对齐项目从左到右调整其位置。

一开始它可能会感到有些混乱，但是一旦您看到主轴和横轴如何响应方向，就可以单击。您将开始发现模式，而布局决策会更加直观。如果您想在练习时仔细检查事物，也有一个快速的参考表。

语法和公共Flexbox属性

将容器的显示属性从块切换到Flex，以激活Flexbox。当您执行此操作时，浏览器会开始将内部元素（例如行，按钮，卡片或图标）视为Flex项目。

.container {
display: flex;
}

从那里，您使用不同的Flexbox属性来控制行为。例如，正当内容是确定项目如何沿主轴间隔（默认情况下设置为水平，flex方向：行） 。使用Flex-Start将物品对齐向左对齐，弯曲端以向右推动，将它们推为中心，或者之间，或者空间范围的空间均匀地散布。

默认情况下，FlexBox试图将所有项目适合一行。如果有太多的话，它们会根据其弹性折射设置而收缩以适合，如果它们不能缩小足够的缩小，则可能会溢出容器。为了防止这种情况，请打开Flex包装，以便项目移至新线路上，而不是将其塞入一条线上。

您已经可以想到这两个属性可以解决布局问题的许多用例。但是还有更多，每个都可以使您对大小，顺序，对齐和间距的特定控制。

如果您想知道这些实际上是如何以一种有趣的动手方式工作的，请尝试Flexbox Froggy。这是一个有趣的小游戏，您可以在其中应用真正的Flexbox代码将青蛙在池塘周围移动。一路上，您停止猜测并开始确切地认识到每个属性的作用。

为什么使用Flexbox

到目前为止，您已经看到了Flexbox如何改变布局如何响应空间。但是，真正的价值来自于这种转变使您更容易做到的事情。 Flexbox将顽固的布局挑战变成了简单的可重复使用的模式。

• 简化的对齐方式：诸如合理性和对准项目中心或空间项目之类的属性，而无需依赖边距调整或辅助类别。
• 默认情况下响应能力：项目自然会根据其空间而生长，收缩或包装。这会导致在不增加断点的情况下适应的清洁布局。
• 自动间距和尺寸：您可以控制元素如何与Flex Grow，Flex-Shrink和Flex-Basis等属性共享空间，从而使布局流体而不是固定。
• 重新排序而无需更改HTML：您可以在不触摸HTML的情况下更改元素的视觉顺序。该结构保持干净，而布局为不同的屏幕调整。
• 更少的布局黑客：您不再需要浮点，clearfix或高度匹配脚本。 Flexbox用现代，可靠的选项取代了这些东西。

而且，由于它在所有主要浏览器中都得到了支持，因此FlexBox不仅有效，而且可靠。这使其成为现代项目的现代，更可靠的选择。

为什么Flexbox通常比网格更好

网格是另一个流行的布局系统，例如FlexBox。但是，两者都是用于不同用例的。

例如，网格设计用于二维布局，您需要对行和列进行控制。产品展示箱，图像画廊和杂志式编辑布局是网格示例，因为它们依赖于两个轴上紧密排列的结构。

您首先定义网格：有多少行和列，每个行应该有多大或高。然后，将每个项目放入该结构中。

这是一个网格布局。项目在两个轴上都对齐：行和列，具有固定的间距和比例。

但是，并非每个布局都需要该级别的计划。

在大多数情况下，UI截面沿单个方向流动。卡行，图标加上文本块和导航链接的行遵循一个轴，而不是两个。这正是Flexbox所在的位置。

在Flexbox布局中，卡片在一个方向（行或列）上对齐，然后根据容器规则包装和间隔。

您无需提前绘制整个布局。您只需告诉容器，项目应该如何沿单个轴行为，然后flexbox对其进行处理。

因此，除非您正在设计真正取决于刚性网格的东西，否则Flexbox通常将是更快，更简单，更灵活的选择。

Divi 5中的Flexbox

到目前为止，关于Flexbox的所有知识都很棒，但是为每次布局调整编写自定义CSS并不是您想做的，尤其是如果您使用视觉构建器（例如Divi）构建了网站。

这就是为什么Divi 5现在包含内置Flexbox控件的原因。您不再需要切换选项卡或手动添加CSS。所有这些，甚至是高级布局行为，现在都内置在视觉构建器中，减去编码和压倒性的后端。

订阅我们的YouTube频道

长话短说，不需要记住语法或属性名称，只需从接口中选择您想要的内容即可。单击任何部分，行或列，前往“设计”选项卡，然后在布局>布局样式下，请确保使用Flex。

这打开了一组新的布局控件。这些是您通常在CSS中写入的核心Flexbox属性，但现在是可单击的选项。您可以实时测试更改，并查看内容的反应。

因此，即使您从未写过一行flexbox代码，也不会错过任何东西。 Divi 5在相同的控制级别上为您提供相同的布局控件，但更轻松。

了解有关Divi 5的Flexbox系统的所有信息

新的行结构

为什么当其他网络构建者还拥有它时，为什么Divi？尽管许多Web构建者将Flexbox作为布局选项，但Divi 5对其进行了不同的方式。这不是现有系统之上的分层的功能；现在，这是构建器工作方式的核心。

整个布局发动机都在其基础上以Flexbox的形式从头开始重建。结果，布局行为感觉更加一致和可预测，因为它遵循故意设计的布局逻辑。

例如，当您在Divi 5中添加新部分或行时，您会立即注意到一些不同的东西。新结构。现在每个人默认情况下在FlexBox上运行，这意味着从一开始就更明智地处理对齐，间距和响应性。

您无需为添加的新设计元素打开Flex。当您这样做时，在编辑较旧的布局时，对齐和间距工具就会立即易于管理。

您还可以使用更改列结构更改如何在行内排列的列。

这打开了一个面板，您可以在其中选择一个新的列结构。布局立即更新，Flexbox会自动调整间距和对齐方式。

尝试添加一些不同的行类型并调整屏幕大小。您将看到一切都在不崩溃的情况下改变和适应。这就是弹性箱烘烤到构建器中的优势，使Divi 5成为更可靠和现代的选择。

flexbox在Divi 5中的工作方式

如果您开始使用，这是一项快速的演练，可以帮助您在Divi 5中使用FlexBox时感到自信。

布局控件

当您将部分，行或列切换到Flex布局时，设计>布局设置中会出现一组新的布局控件。这些为您提供了视觉Flexbox控件，并带有通常的选项。

• （1）布局样式：这是您激活Flex的地方。设置后，其他特定于方向，对齐和间距等其他特定的选项将变得可见。
• （2）水平差距：从左到右增加项目之间的空间。
• （3）垂直间隙：使用列布局时，在堆叠元素之间设置空间。
• （4）布局方向：更改流，行，列或反向方向，因此项目可以并排对齐或从上到下对齐。
• （5）证明内容是合理的：沿主轴对齐。您可以将它们居中，将它们推到一侧或将其散布。
• （6）对齐项目：对齐沿横轴的项目，在垂直排列在水平行中时，这很有帮助。
• （7）布局包装：这使得在空间用完时可以将项目移至下一行。在构建响应屏幕尺寸而不是断裂的布局时有所帮助。

假设您有一个带有徽标的品牌栏，希望它们更大。将弹性方向设置为行并打开布局包装，当没有空间时，它们会自动流入两个行。

现在，如果没有媒体查询或手动解决方法，将两行的元素排列在一起很容易。

列控件和尺寸

进入弹性可启用行之后，每列在设计>大小的列列中都有一个新设置。这决定了一列根据其内容和周围环境占用的空间。

您可以在收缩之间进行选择以适合（这只会使列仅与其内容一样宽）或生长以填充（这延伸了列以占用额外的空间）。

例如，如果您想让文本列更加突出并具有拥抱其内容的卡元素，则将卡片设置为缩小以适合其，并将文本成长为填充。

订单控件

另一个功能强大但经常被忽略的工具是“内容”选项卡下的顺序设置。这使您可以在视觉上重新排序列和模块，而无需更改线框或图层视图中的布局结构。

假设您希望一个特定的模块首先出现在移动设备上，但在台式机上第二。您可以在每个断点处分配不同的订单值。

Flexbox的实际用例

让我们看一下现在使用Divi 5简化的一些Flexbox用例。

1。垂直对齐任何东西与弹性

很长一段时间以来，垂直对齐是Web Design最令人讨厌的布局问题之一。您会尝试使用填充技巧，绝对定位，手动边距，以及最终在台式机上看起来不错但在较小的屏幕上打破的东西。

有了Divi 5，头痛就消失了。现在，如果您想垂直将内容集中在部分中，则只需将对齐项目设置为中心即可。

就是这样。布局会自动调整跨断点，您的内容始终保持在最佳位置。现在，使用CSS体操的方法现在只有几下构建器内部的几下。

2。自动均衡卡高度

您可能以前遇到了这个问题。您可以创建一排卡片，例如Blurb部分，并且一切看起来都不错，直到一个项目的文本比其他文字更多。突然，您的布局感觉不平坦。有些列伸展更高，其他列保持短缺，并且设计失去了平衡。

不再需要该手动清理。当您将行或部分切换为Flex时，Divi应用默认设置，将每列视为Flex项目。这会使它们自动伸展以匹配同一行中对方的高度，而不管内部的内容如何。

它也保持响应能力。在较小的屏幕上，列包裹成新的行而无需额外的调整，并且相等的高度行为继续适用。

3。跨断点自动截断按钮

保持一排按钮整洁，可以在不同的屏幕尺寸上可读，这可能很痛苦。通常，您最终会添加新行或手动调整每个断点的布局。但是对于Divi 5，这已不再需要。

打开Flex布局，并在笔记本电脑视图中启用布局包装。就是这样。这些按钮将在较小的屏幕上自动包裹成多条线，而不会破坏布局。

这些按钮将其间距和对齐方式保持在较大的屏幕上，并自然地堆放在平板电脑和电话上。您甚至可以使用正当内容来微调他们的对齐方式，并使用缝隙进行控制间距，因此所有尺寸的一切看起来都很干净，有意。

Divi + Flexbox只是有意义的

您已经看到了Flexbox的工作原理，Divi 5如何使其视觉效果以及现在的常见布局头痛现在花费几秒钟而不是数小时。 Divi 5不仅支持Flexbox - 它是围绕它构建的。没有自定义CSS，每个部分，行和列都可以按照您的期望。

Flexbox不仅是使用Divi 5设计的选项。这是更聪明的默认值。清洁的布局，更少的解决方法和响应式控制液直接烘烤到建筑商中。这就是转变，这是为您的Web Design的未来做准备的事情。