如何在Divi 5中使用Flexbox创建相等的列高度

创建干净，专业的布局是有效的Web设计的基石，相等的柱高度有助于平衡的布局。无论您是显示产品，服务还是投资组合项目，都可以完美地促进用户体验。在Divi 4中，相等的列是可能的，但是Divi 5在表中带来了更多。

在Divi 5中，其Flexbox布局系统的集成改善了过程，提供了一种更简单，更灵活的方式来创建相等的列高度。这篇文章将指导您创建干净，平衡的布局。让我们潜入！

Divi 4中相等的柱高度

在Divi 4中，以相等高度实现圆柱很简单，但有限。一个切换启用了一行中的所有列，以匹配最高列的高度。此功能是维持视觉一致性的救生员，但是它的局限性通常需要解决方法。

Divi 4中的相等高度效应应用于列容器，这意味着必须在列级设置背景颜色，图像或边框。这种方法没有扩展到列内的模块，这可能会导致尴尬的间隙。例如，一个列中的短文本模块下面的一个按钮将在其下方留出尴尬的空间，而另一列中较长的文本模块下方的一个按钮填充了它，从而产生了不平衡的外观。

当设计人员想要更多的控制权，例如垂直对齐模块内容或调整间距，通常需要定制CSS。这构成了一个挑战，尤其是对于初学者而言，他们必须深入研究Divi的自定义CSS领域才能取得抛光结果。例如，如果您希望按钮与Divi 4中的列底部对齐，则必须使用CSS来实现它。

Divi 5中的FlexBox如何地址相等的列

Flexbox无缝集成到Divi 5中，从而使创建相等的列高度更容易实现。与Divi 4的基于切换的选项不同，Divi 5 Leverages Flexbox提供内置控件，使设计网页更容易。

使用Flexbox，您可以自动拉伸列以匹配最高的列，同时为这两个列及其内容提供精确的对齐选项。这消除了对自定义CSS的需求，使初学者和专业人士都可以为每个Divi用户提供高级布局。 Divi 5的Flexbox布局系统允许设计人员轻松创建一致的专业设计。

如何在Divi 5中创建相等的列高度

由于其Flexbox集成，在Divi 5中创建具有相同高度的列是轻而易举的。在下面的步骤中，我们将演示如何设置物品并确保一切都完美排队。

步骤1：创建设计

在新页面或现有页面上打开视觉构建器。单击黑色 +图标以添加新行。

当出现新的部分对话框时，在相等的列下选择三列布局。

在第一列中添加组模块。

接下来，将图标模块添加到第一列中的组模块中。

在“内容”选项卡中选择“检查图标” 。

在“设计”选项卡中，将图标颜色设置为＃2EA3F2 图标尺寸为36px。

接下来，在图标模块下方添加一个标题模块。请确保通过单击黑色 +图标而不是灰色图标将标题添加到组模块中。

在“内容”选项卡中键入Web Design作为标题。

在“设计”选项卡中，选择H5作为标题级别，作为标题字体，将中等作为标题字体重量。将标题字体样式设置为大写，将文本对准向左，标题文本颜色为＃000000 ，并将标题文本大小保持在16px的默认大小。

接下来，在组模块内的标题下方添加一个文本模块。您可以保持设置状态。

我们将为列中的最终模块添加一个按钮模块。但是，我们没有将其添加到组模块中，而是将其添加到下面。这将使我们能够创建相等的列高度，但将按钮对准底部，从而使设计更加凝聚。

单击“设计”选项卡，然后将所需的样式设置分配给按钮模块。通过查看左侧菜单中的“图层”视图来检查您的按钮以确保其在组模块之外。完成后，该按钮应看起来像下面的屏幕截图 - 左与蓝色背景和白色文本相符。

步骤2：复制列

一旦第一个列填充了内容，我们将将内容从第一列复制到第二和第三列，并进行一些更改。您可以删除第二列和第三列，并复制第一个和第一个列，或将组模块和按钮复制并粘贴到第二和第三列中。

接下来，将第二列中的标题标题更改为编码，以及第三列中的标题标题。我们还将在第二列中删除文本模块中的某些内容，因此我们可以演示Divi 5如何处理具有不同内容长度的Flexbox。如您所见，这些列是不平衡的。

在进入下一步之前，请单击第一列，然后在列的所有侧面添加25px间距。

我们还将添加15px边框半径和1PX边框宽度， ＃666666作为颜色。

设计行的最后一步是将设计属性从第一列复制并粘贴到其余列中。右键单击第一列，然后选择“复制项目样式” 。接下来，右键单击第二列上，然后选择“粘贴”项目样式。还重复第三列的动作。

步骤3：为等高配置Flexbox设置

接下来，我们需要为行配置我们的Flexbox设置。 Divi 5将Flexbox控件集成到其布局系统中，超越了Divi 4的均衡列高度切换。导航到该行的“设计”选项卡，并确保在布局下选择Flex 。

接下来，确保在布局方向下选择该行，在合理的内容下启动，然后在对齐项下选择strave 。这将告诉Divi 5保持列结构，对准左侧的所有项目，并填充父容器内的可用空间。

接下来，单击第一列的设置。单击布局下拉菜单以在“设计”选项卡中显示其设置。默认情况下，将在布局下选择FLEX 。在布局方向字段中，选择列。在合理的内容之下，选择之间的空间。将所有项目对齐到开始（左），并将布局包装设置为没有包装。

重复上述第二列和第三列的步骤。您也可以使用复制/粘贴或扩展功能将相同的设置应用于行的其余列。

组中的所有模块都将被拉伸以填充可用空间，并且组外部的按钮将对齐底部。

步骤4：测试响应能力

Divi 5的可自定义响应式断点使您可以轻松确保在所有设备上相等的列高度看起来都很好。使用响应视图切换在视觉构建器中预览您的布局。默认情况下，有三个断点。但是，Divi 5现在有7个，可以通过单击Visual Builder顶部的工具栏中的省略号菜单来轻松启用。启用您想要的断点，然后单击“保存”以应用它们。

单击以在平板电脑视图中预览您的布局。如您所见，Flexbox将列并排堆叠。

您可以更改列结构以允许列垂直堆叠在较小的设备上。在平板电脑断点中，单击“行的内容”选项卡。单击更改列结构。

当对话框出现时，单击以在平等的列下启用单行。这将在平板电脑和移动设备上的单列中将3列行更改为单一的列，同时保留台式机上的3列结构。

当您预览所有断点上的更改时，您将看到Divi如何转变小屏幕的布局。

通过自动化高度对齐，设计人员可以专注于创造力而不是技术修复，从而更容易在很短的时间内构建专业网站。 Divi 5的Flexbox布局系统还通过模块组支持更好的内容组织，使无自定义CSS的对齐模块比以往任何时候都更加容易。

常见用例

Divi 5的Flexbox系统使创建相等的列高度通用性，并且在各种用例中有效。以下是Divi 5的Flexbox系统发光的一些常见方式：

1。产品清单

在电子商务布局中，由于标题或描述，产品卡的内容长度通常会有所不同。使用Divi 5的Flexbox，您可以创建一个产品卡的网格，每列保持相等的高度，从而确保清洁和专业的外观。例如，简短描述的产品与具有更长描述的产品完美匹配。 Divi 5的Flexbox系统使您可以避免尴尬的空白，并创建具有促进用户信任和参与度的凝聚力体验。

2。特色部分

服务或功能部分非常适合Divi的Flexbox系统。 Divi 5中的Flexbox确保一排中的所有模块具有相等的列高度，从而产生平衡和抛光的外观。无论是展示BIOS，服务还是功能突出显示，均衡的列都可以使您的网页易于扫描，从而改善用户体验。

3。投资组合网格

投资组合网格是Flexbox的理想用例，尤其是用于展示其作品的自由职业者。 Flexbox确保画廊项目（例如图像均匀对齐，即使具有不同的纵横比。您可以使用组模块，为其分配背景图像，并相应地调整间距。这创建了一个整洁，专业的网格，可以始终如一地展示您的作品，使其非常适合摄影师，设计师或旨在打动潜在客户的机构。

下载文件

免费下载

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

下载

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

立即熟悉Divi 5的Flexbox功能

Divi 5的Flexbox布局系统标志着Divi 4均衡列高度的方式的重大飞跃，从而改变了Divi用户如何创建相等的列。如果Divi 4依赖于一种僵化的背景依赖方法，该方法通常需要定制的CSS进行改进，则Divi 5利用Flexbox来提供直观的控制和无缝的响应能力。结果是一个更有效的系统，它消除了对自定义CSS解决方法的需求，并允许Divi用户轻松构建精明的专业布局。

您准备好提升Divi网站了吗？潜入Divi 5的Flexbox设置，并尝试他们解锁的创意可能性。在下面分享您的评论，或在我们的社交媒体渠道上与我们联系，以分享您对我们新的Flexbox功能的想法。