了解Divi 5中的每个弹性箱设置

Flexbox和Divi 5是一个强大的二重奏，使Divi用户能够创建令人惊叹的响应式布局。在这篇文章中，我们将提供理解和使用每个Flexbox设置的最终指南，以轻松创建灵活的，响应迅速的布局。

Flexbox是Divi 5改建的视觉构建器的核心，使用户可以通过无与伦比的控制构建令人惊叹的设计。 Divi 5的Flexbox布局系统使复杂的布局变得轻而易举，从对齐内容到构建动态网格。

让我们潜水。

什么是flexbox？

Flexbox是CSS布局模型，旨在使容器内的安排，对齐和分发元素在容器中，即使它们的尺寸是动态的，也是如此。与依靠浮子或定位的传统CSS布局不同，Flexbox提供了一种直观的方式来构建灵活和响应式设计，使其成为现代网络开发的基石。

订阅我们的YouTube频道

Flexbox的关键概念

Flexbox围绕几个基本概念运行：

• Flex容器：具有显示的父元素：应用Flex或Inline-FLEX ，建立Flex内容。该容器决定其子女在布局中的行为。
• Flex项目： Flex容器的直接子女，根据容器的Flex属性进行排列和对齐。
• 主轴和横轴： Flexbox沿主轴（水平为行或垂直为列）和垂直横轴运行。主轴的方向可以适应不同的模式，例如从左到右，为全球设计提供了灵活性。

Divi 5中的Flexbox：一个新时代

Divi 5的Flexbox布局系统内置在视觉构建器中，使Divi用户可以使用直观控件创建响应式布局。这些设置主要应用于各节，行，列和模块组，使您可以在不编写CSS的情况下在视觉上操纵布局行为。 Flexbox使对齐，重新排序和轻松转换元素变得容易。

访问Divi 5中的Flexbox

在Divi 5中访问Flexbox是直接而直观的。打开视觉构建器，添加新的行，然后前往“设计”选项卡。您会在布局下拉下找到flexbox设置。

这些设置在Flex容器级别（部分，行等）上应用，以控制其Flex项目的行为。 Divi的界面通过用户友好的选项显示设置，从而使所有技能级别的用户易于使用Flexbox。

让我们遍历每个设置，以便您可以更好地了解它们的工作方式以及如何使用它们来构建布局。

Divi 5中Flexbox设置的详细分解

以下是Divi 5中每个与FlexBox相关的设置的指南。每个设置都包含其目的，可用选项和实际用例，以帮助您有效地应用它们。

布局样式

FLEX是布局样式下拉菜单中的默认选项。当您将容器设置为Flex时，它将变成一个Flex容器。然后，可以使用CSS Flexbox属性灵活对齐其直接的子元素（Flex项目）。

另一方面， Block是Divi过去的传统方式。块容器中的元素被视为块级元素。这意味着它们通常垂直堆叠，占用父容器的完整宽度。

水平和垂直间隙

在Divi 5的Flexbox设置中，水平和垂直差距控制起作用，充当CSS GAP属性。它们提供了一种有效的方法来在容器内的子元素之间增加一致的间距。

水平差距定义了弹性项目水平排列时的空间。在下面的示例中，水平差距在每列之间创建空白空间，而不是在Flex容器的外边缘上创建空白。默认情况下，选择％，但是您可以在此处使用Divi 5的CSS属性中的任何一个。

垂直差距定义了项目行之间的空间。当您启用布局包装（稍后再详细介绍）时，这将变得非常重要。当布局方向设置为列或列反向时，它也适用。

布局方向

Divi 5中的布局方向选项（CSS中的挠性方向属性）是最基本的控件之一。它确定了将安排容器内的子元素的主要轴。

将其视为设置内容的流程。有四个主要选择：行，行反向，列和列反向。行是最常见的设置。 Flex项目将从左到右水平排列。它是创建传统的水平列布局，导航菜单，并排元素或任何希望物品在页面上流过的时间的理想选择。

通过行反向，项目仍然水平排列，但方向相反。

当您选择列时，项目将垂直排列，从上到下。这是将模块堆叠在单列中，创建内容垂直列表或构建元素需要向下流动的布局的好选择。

列反向工作与列相同，将项目垂直在容器中堆叠，但相反。

证明内容合理

Divi 5的合理内容选项（CSS中的合理性属性）控制沿Flex容器的主轴的Flex项目对齐。

选项包括启动（CSS中的flex-start），将项目与主轴的开头保持一致。中心将项目对齐到主要访问的中间。当您使用布局方向>行时，项目将水平居中。如果使用布局方向>列，则项目将垂直中心。结束将项目对准末端（根据您的行或列选择，右或底部）。

在沿主轴上均匀分配项目之间的空间。第一项与开始对齐，而最后一个项目与容器的末端对齐。周围的空间沿主轴均匀分布，每个项目周围都有相等的空间。最后，空间平均分发项目，其中两个相邻项目之间的间距以及第一个项目和最后一项之后的空间是相同的。

对齐项目

Divi 5的Flexbox设置中的“对齐”项目选项（Align-Intems css属性）控制flex项目如何沿Flex容器的互轴对齐。此选项不同于合理的内容，该内容将项目沿主轴对齐。

当您将布局方向设置为行或行反向时，横轴变为垂直。这允许对齐项目控制一行中项目的垂直对齐。如果将布局方向设置为列或列反向，则横轴是水平的。因此，对齐项目将控制列中项目的水平对齐。

有四个主要选项，包括开始，将项目与开始，中心，结束和伸展的项目保持一致，这些项目延伸物品以填充沿容器的跨轴的全部可用空间。分配的特定高度或宽度的项目将覆盖拉伸。

布局包装

在Divi 5的Flexbox设置中，布局包装（Flex-wrap CSS属性）确定当Flex容器中的flex项目用光空间用尽空间时会在空间紧张时将其包裹在下一行上时会发生什么。 Divi 5中有三个选项，包括没有包装，包装和包装反向。

默认设置没有包装，它告诉Flex容器尝试将所有Flex项目都安装到单行或列上，而不管可用的空间如何。如果物品太宽而无法合适，它们将溢出容器（超越边界）或收缩以适合。如果元素超过了行上的分配空间，则允许元素将其包裹在新线路或列上。包装反向与包装类似，但是当将其包裹到下一行时，它们朝相反的方向这样做。

在模块级别的flex控件

除了在部分，行和列级上具有FlexBox控件外，Divi 5还为您提供了对单个Divi模块的精确控制。例如，使用组模块时，您可以调整间距（gap），布局方向以及Divi 5的所有其他Flexbox设置。

Flexbox的优点

Divi 5中的Flexbox不仅是技术升级。它提供了一种更好，更有效地构建现代，响应式网站的方法。通过将FlexBox集成到视觉构建器中，Divi 5允许所有技能级别的用户无需编写代码即可利用CSS的功能。这是Flexbox是Divi 4的有影响力升级的一些原因：

直观的无代码布局控件

Divi 5将Flexbox设置直接集成到视觉构建器中，让您使用简单的选项调整对齐，间距和订购。无论您是创建相等的列高度还是垂直居中，Flexbox都使复杂的布局变得容易。

更好的响应设计

Divi 5的Flexbox布局系统使响应式设计变得轻而易举，这要归功于台式机，平板电脑和智能手机的可定制布局控件。 Divi的更改列结构选项使您可以更改平板电脑和智能手机上的列数，同时将布局的列结构完好无损。

Flexbox +嵌套行

在Divi 5中将嵌套行和Flexbox结合在一起，您可以轻松构建复杂的多层次布局。例如，您可以使用包含自己的行的列创建一行，从而启用复杂的设计（例如网格或分层内容部分）。

Flexbox +模块组

Divi 5中的模块组充当弹性容器，使您可以作为凝聚力单元的样式和位置组模块进行样式和位置组模块。这使得创建动态部分（例如功能框或推荐卡）变得简单，该部分会自动适应内容变化，同时保持一致的间距和对齐方式。

改善性能和简单性

通过用统一的基于Flexbox的系统替换Divi 4的专业和全宽部分，Divi 5简化了设计过程，降低了复杂性和提高性能。这意味着加载时间更快，并且具有更顺畅的编辑体验，尤其是对于大型或内容丰富的网站。

快速启动的预构建Flexbox模板

Divi 5介绍了利用Flexbox的新行模板，以提供预定义的灵活布局，例如相等的列，偏移列，多行网格和多柱网格。这些模板可以激发创造力，使您可以通过Flexbox设置使用完全可定制的结构来跳动设计。

未来的设计工作流程

随着Divi 5在其公共alpha阶段的发展，其Flexbox布局系统将Divi用户定位在现代网络设计的最前沿。通过现在掌握Flexbox，您将配备与行业标准相符的技能，以确保您的网站能够适应以后的更新。

Divi 5中使用Flexbox解锁创意潜力

Divi 5中的FlexBox改变了用户构建响应式，动态布局的方式。 Divi 5允许用户创建令人惊叹的现代网站，而无需编写代码，通过将强大的CSS Flexbox属性集成到视觉构建器中，而无需编写代码。从直观的对齐和间距控件到嵌套行和模块组等高级功能，Flexbox布局系统简化了复杂的设计，同时确保在所有设备上看起来都很好。