如何垂直与Divi 5的Flexbox布局系统保持一致

在现代网络设计中创建视觉平衡且响应迅速的布局至关重要，Divi 5的新Flexbox布局系统比以往任何时候都更容易实现垂直对齐。这项强大的新功能使Divi用户可以设计灵活的动态布局，从而对垂直定位提供完全控制。无论是在部分中对齐文本，在多列行中平衡内容，还是创建响应式设计，Divi 5都可以通过直接构建在视觉构建器中的直观控件来简化该过程。

在这篇文章中，我们将介绍掌握垂直对齐的步骤，提供真实的示例，并提供创建响应迅速，抛光布局的技巧。让我们探讨Divi 5的Flexbox布局系统如何将您的方法转换为垂直对齐。

了解Divi 5的Flexbox布局系统

Flexbox或Flexible Box布局是CSS布局模型，旨在简化容器中元素的布置，使其非常适合水平和垂直对齐。与传统方法（如浮子或边距）不同，Flexbox为组织内容提供了一种直接的方法。它允许元素根据容器的尺寸和视口动力调整其尺寸，顺序和对齐方式，以确保布局在所有屏幕尺寸上保持一致并响应。

使用FlexBox，您可以轻松地将内容中心内容，平均分配空间或以特定顺序分配元素。这种灵活性使网络设计师必须是必须的，并且Divi 5利用其功能，允许用户创建复杂的布局而无需CSS的高级知识。

Divi 5如何集成Flexbox

Divi 5最近引入了其Flexbox布局系统。该系统将Flexbox直接集成到视觉构建器中，从而允许用户使用直观设置来控制部分，行，列和模块布置。

关键功能包括各种新的行模板，从单列到多行部分，使在Divi中构建布局比以往任何时候都更容易。

Divi 5的Flexbox控件使您可以控制布局的方向，调整水平和垂直间隙，证明内容为开始，中心或结束，启用包装等。

Divi 5的新更改列结构功能使您可以更多地控制列在较小的设备上的行为方式。您可以轻松更改列数或重新排序，使设计在任何屏幕尺寸上看起来都很好。

Divi 5偏离了专业和全宽部分，因为现在可以将行相互嵌套以创建复杂的，响应迅速的设计而不依赖于过时的部分类型。这些进步使Divi 5的Flexbox布局系统成为直接在构建器中构建现代，适应性布局的强大工具。

在Divi 5中设置垂直对齐

Divi 5的Flexbox布局系统已无缝集成到视觉构建器中，使用户可以访问灵活且响应迅速的设计。首先，在新的或现有的页面上打开视觉构建器，然后添加部分和行。我们已经创建了整个布局，因此我们可以在各种情况下逐步逐步对齐项目。

部分垂直对齐

在本节的设置中，导航到“设计”选项卡并找到布局选项，您可以在其中找到Flexbox控件。

确保在布局样式下选择Flex 。这确保了该部分启用FlexBox。

默认情况下，启动（Flex-start）是在合理内容下选择的。这将在容器开始时对齐所有项目。在此示例中，当想要垂直中心的项目中心时，您可以选择将它们对齐到中心，周围或空间均匀。由于我们有一个带有嵌套行的单行，因此我们部分中的所有设计元素将以上述任何选项为中心。

垂直对齐

您还可以在行级别垂直对齐内容。但是，在此示例中，我们将使用对齐项目而不是证明内容合理以垂直对齐行中的模块。在该行的“设计”选项卡中，找到布局设置。确保启用Flex并找到对齐项目设置。默认情况下，选择“启动” ，这将行中的所有模块与容器顶部对齐。

有一些选择，具体取决于您要如何对齐元素。如果您希望行中的项目垂直中心，请选择中心。选择结束时，所有项目都将与行底部保持一致。拉伸使所有物品都充满了行的高度。

多排截面的垂直对齐

在这种情况下，我们在一个部分中有三行，包括单列行和两行。我们将使用合理的内容设置来垂直对齐行中的所有内容。

当一节使用列作为布局方向时，合理的内容将垂直对齐其行。默认情况下选择开始。它将所有行与部分顶部保持一致。这些行将从顶部边缘开始包装在一起。中心在垂直部分中对齐所有行。行将从底部边缘开始包装在一起。当您选择末端时，所有行都与部分的底部对齐。这些行将从底部边缘开始包装在一起。

沿主轴（垂直）均匀分布行之间的空间。第一行将冲洗到截面的顶部，最后一行与底部的排成一行，而两者之间的任何行都将具有相等数量的空间将它们分开。周围的空间在每个项目周围都有相等空间的行分布行。

相邻行之间的空间将是行末端（第一行之间和部分顶部之间的空间，以及最后一行和部分底部之间的空间）。最后，空间均匀地与周围的空间相似，但是它确保每行之间的空间相同，并且截面的开头和末端的空间也等于该间距。

模块组的垂直对齐

Divi 5的Flexbox系统还简化了模块组中的垂直对齐，尤其是在使用Loop Builder之类的功能进行动态内容时。考虑一个模块组，显示带有图像，帖子标题，帖子摘录和按钮的博客帖子。如果没有适当的对准，诸如按钮之类的元素可能会在各列中看起来不对。在以前的Divi版本中，此需要相等的列高度和自定义CSS。 Divi 5使用Flexbox简化了此过程。

要对齐元素，请单击模块组的第一列，导航到“设计”选项卡，然后找到flex设置。将合理的内容设置为之间的空间。这均匀地分布了列中的模块，完美地对齐了所有无自定义CSS的所有列的阅读按钮。这种方法可确保动态内容（例如博客网格或产品列表）的一致，专业的布局。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包！

响应式垂直对齐的提示

Divi 5的Flexbox布局系统使垂直对齐内容变得容易，但是有一些技巧需要考虑。 Divi 5提供了可响应设计的强大工具，使您可以在所有设备上微调垂直对齐。无论您是将内容集中在英雄部分中，还是在多列布局中对齐按钮，以下技巧都将帮助您利用Divi 5的功能来保持一致，专业的布局。

使用Divi 5的可自定义响应式断点

Divi 5的Flexbox系统允许您自定义不同屏幕尺寸的模块订购和对齐，以确保您的布局适合所有屏幕尺寸。在Visual Builder中，您可以使用七个可自定义的响应式断点来控制布局在设备之间的显示方式。

为了优化垂直对齐，您可以在平板电脑和移动设备上调整列结构。这样可以确保您的布局在每个屏幕尺寸上看起来都完美。例如，您可能需要在平板电脑上的两列，而在移动设备上只需一列。

Divi 5的Flexbox布局系统还允许您更改移动设备上的列顺序，从而控制移动用户在部分或行中首先看到的内容。

使用Divi 5的设计变量

Divi 5的设计变量功能非常适合保持跨响应视图的一致间距和对齐。设计变量允许您定义诸如填充，边距和字体大小之类的属性的可重复使用值，从而确保布局均匀性。对于垂直对齐，您可以创建一个用于垂直填充的变量，以在行或截面内标准化间距。例如，在Divi的变量管理器中将名为垂直填充的设计变量设置为30px 。

要将变量应用于行，请导航到“设计”选项卡，单击“间距”下拉菜单，然后单击“动态内容”图标以使用它。

Flexbox使垂直对齐变得容易

Divi 5的Flexbox布局系统使垂直对齐变得容易，为创建抛光布局提供了灵活而响应的解决方案。通过将FlexBox集成到视觉构建器中，Divi 5允许用户精确地控制部分，行，列和模块组的对齐，而无需CSS的高级知识。它的功能可确保在所有设备上进行一致的专业设计。无论您是居中内容，对齐动态模块组还是构建多行布局，Divi 5在提供结果的同时简化了该过程。

下载最新的Divi 5 alpha，并在一个新项目上使用Flexbox布局系统进行实验。