切换到Divi 5的flexbox布局系统时要避免的5个陷阱

Divi 5刚刚运输了其全额外弹性箱的布局系统。它取代了Divi 4的旧块布局引擎，并在视觉构建器中解锁了强大的新控件。现在，每一行默认为flex布局。除非您已经使用了CSS Flexbox，否则此更改需要一种新的设计思维方式，因为Flex的工作方式不同。如果您不调整习惯，就会卡住。

此更新为您提供了用于包装，方向，间距，订购和对齐方式的视觉控制 - 全部内置。没有骇人听闻的自定义CSS。它还带有预配置的行快捷方式，以最少的显示设置来构建复杂的行结构。弃用了一些基于块的功能，例如专业和全宽部分，因为Flex现在涵盖了所有这些用例。

这篇文章进入了将心理模型从块切换到Divi 5中的Flex时，您将遇到的五个最大的陷阱。

陷阱1：强迫Flex进入块心态

→Flex需要一个新的心理模型，而不仅仅是新的控件。

除非他们知道自己达到了非常真实的局限性，否则没有人喜欢改变。对于许多人来说，旧的布局系统是他们所知道的和满意的。但是它确实有其局限性。那些对CSS了解足够多的人知道，旧系统缺少Flexbox设计用于补救的东西。避免第一次陷阱需要了解Flexbox不仅是带有额外选项的块布局。

在Divi 4中，默认情况下垂直堆叠的模块 - 每个元素都坐在一个元素之前。您可以用列水平堆叠东西，但是在那时，您可以在部分内与多个行 +列一起构建布局。对于许多人来说，这是可以预测且舒适的，但这也导致了令人沮丧的现实，即无法并排两个按钮和其他设计挑战。

Divi 5现在的工作方式有所不同，因为默认情况下，新容器（即，段，行，列和组）设置为“ flex”。您可以在集装箱级别获得更具体的选项，以安排子元素。 Flexbox具有功能强大，因为它允许在基于可用空间及其内部内容的元素位置的灵活布局。在下一个陷阱中有关此的更多信息。这允许布局适应不同的屏幕尺寸和内容，而无需依赖固定或绝对定位。这只是将Flex与Block进行比较的一个示例。

块布局沿块轴垂直堆叠模块。 Flexbox可让您在行和列之间选择作为主轴。

UI中的每个设置和选项都与添加到每个容器中的实际CSS属性直接对应。

陷阱2：不知道Flex缩小和生长如何适合儿童元素的尺寸

→没有收缩和成长，您的布局不会像预期的那样行事。

在Divi 5中的Flex中，儿童模块可以具有设定的宽度或高度。此外，它们可以根据容器内的房间而收缩或填充（其宽度或高度）。在此示例中，文本模块设置为45％的宽度，这意味着两个模块可以水平拟合，就好像在同一行中一样。但是，如果我们添加奇数文本模块，我们不希望有空的空间。我们可以将这些模块设置为使Flex增长，然后在连续有可用的空间时，这些模块将增长以填充。

Divi公开了“填充”，“缩小为适合”，以及任何flex容器中的子元素（子元素>设计>设计>尺寸>生长以填充，缩小，适合或定制）之类的控件。

如果您用来阻止布局，则将儿童元素的高度和宽度设置为熟悉。但是，使用Flexbox，增长和收缩设置使您可以将固定尺寸与响应式行为相结合 - 适应每个容器中的可用空间。它增加了复杂性，但也可以解锁更大的灵活性。

收缩以适合并成长以填充（除了弹性基本外）也非常方便帮助您创建响应式布局。为了使块布局经常响应，您需要在每个断点中的每个断点设置多个断点和宽度/高度。 Flexbox可以从各种断点处的唯一设置中受益，但是顾名思义，它非常灵活。当使用clamp（）进行排版时，尤其是这种情况。将这两个一起使用，以及其他相对CSS单元，将破坏您对断点的不断需求。

让我们看一个使用Flexbox构建的示例。

列容器（parent）设置为使用以下设置：

• 水平和垂直差距：30px（这可以使用计算或夹具变得更好一点）
• 布局方向：行反向（陷阱4中的此决定的说明）
• 证明内容：中心
• 对齐项目：中心
• Flex包装：包装反向（陷阱4中的此决定的说明）

然后，我将三个子元素放在列内。标题模块，分隔模块和文本模块。这是每个相关设置：

• 标题模块
  • 文本大小：夹具（2REM，1.5REM + 2VW，3REM）
  • 宽度：自动
  • 弯曲尺寸：收缩至适合
• 分隔器模块
  • 宽度：自动
  • 弯曲尺寸：收缩以适合并成长以填充
• 文本模块
  • 文本大小：夹具（0.9375REM，0.75REM + 0.4VW，1REM）
  • 宽度：自动
  • 弯曲尺寸：收缩至适合

有一个行弯曲方向，每当有房间时，子元素都会水平对齐。文本模块是最宽的，因此它填充了自己的行。然后，由于它具有自动宽度，并且启用了Flex Grow和Flex-Shrink，因此分隔器模块会生长或收缩。标头模块仅使用其内在宽度并保持紧凑。此设置可产生完全响应的布局，而无需任何断点。

陷阱3：不打破边距习惯

→改用缝隙 - 更聪明，更干净，并且可以弹性。

在Divi 4中，模块和其他元素之间的视觉间隙需要边缘（通过底部边缘的垂直缝隙，通过左/右边缘的水平间隙）。当差距应用于列间距时，Divi 4具有排水沟设置，但并未采用标准的CSS值，实际上它将边距用于列的侧面以创建间隙。这与块布局仍然可以正常工作一样。但是现在有一种更清洁，更有效的方法。

Divi 5的Flexbox系统在设计>布局>水平和垂直间隙下引入行和垂直间隙控件。这些映射到CSS间隙和行隙。当项目包裹到新线路上时，垂直差距会自动应用于每个“弹性行”。水平差距也是如此：每当彼此相邻的子元素时，差距就会存在。这些差距设置还接受任何正CSS单元，因此您可以使用clamp（）或calc（）创建响应差距间隔。

这减少了将保证金值应用于每个子元素的需求。间隙设置会根据挠性方向和容器中的儿童数量自动调整，以自动应用任何缝隙。边缘仍然有自己的位置，但是它们需要在容器内进行间距元素的需求减少。

陷阱＃4：逆向流程和订购控件不足

→视觉顺序和语义顺序不必匹配。

默认情况下，Flex容器中的子元素将以其源顺序显示。 Flexbox和Divi 5使您能够指定反向弹性方向和订单控件，以更改元素的视觉流，而无需更改元素的HTML顺序。

在布局方向下，反向方向切换使您可以在行或列方向上逆转元素的顺序。要再次查看陷阱2中的布局示例，我们可以看到为什么要这样做。您可以在以下图层中看到子元素的顺序是标题，然后是分隔线，最后是文本模块。从语义上讲，在堆栈顶部将标题（在这种情况下为H2）对于屏幕读取器来说很有意义。但是，由于我们使用具有文本大小的视觉层次结构，因此标题在视觉上足够明显。

使用行反向作为弹性方向和包装反向保留HTML订购（对于可访问性很重要），同时还可以设计我们如何设想的东西。

您可以使用子元素排序实现相同的操作，这可以在单击子元素的设置>“内容”选项卡>订单时在Divi中找到。我们可以更改仅此元素出现的顺序。在此示例中，我们达到了相同的最终结果，但是使用不同的设置 - 这可能对某些人更有意义。

陷阱5：忘记设置包裹

→除非您告诉它，否则Flex不会闯入新行。

我们提到了较早的包装，但它值得自己的部分。新的Flex容器默认为没有包装。这可能会带来意想不到的后果。例如，如果添加四个儿童模块，每个模块宽度为50％，则希望它们在两个Flex行上显示。您的问题仅仅是您必须允许您的容器包装。

Divi包含一个称为布局包装的切换，该切换具有三个状态：无包装，包装和包装不转换。如果您希望模块在阈值下折断新线条，则必须启用包装。这就是Divi支持单个容器内部多行结构的方式（嵌套或多行不是现在这样做的唯一方法）。

花点时间主持flexbox

Divi 5中的Flex比Divi以前的仅限块布局系统更强大。但是，这需要一些学习才能理解。 Flexbox不是特定于Divi的设置，因此重要的是要了解该CSS工具的工作原理。 Divi使实施变得易于实现，因为您可以在CSS中应用的所有设置直接在编辑器中可用。但是这个概念与块有很大的不同。

由于存在这些差异，我们强烈建议您使用交互式教学工具花一个小时来了解Flexbox。一个易于使用，真正解决问题的是FlexboxFroggy.com。它带您经历了24个逐渐复杂的挑战，教您所有基础知识。它比命令滚动一个小时要好得多。

今天使用flex 5

Divi 5中的Flexbox是诚实的。它没有猜测你想要什么。它要求您决定。但是，一旦决定，灵活性就会随之而来。您可以在没有自定义CSS或骇客的情况下，负责任，响应和可靠地（甚至无限地嵌套）构建每个布局结构。