Flexbox CSS属性的初学者指南

良好的布局始于一个清晰的对齐和间距的模型。 Flexbox通过沿单个轴组织内容来提供对方向，对齐，包裹和间隙的可预测控制来提供该模型。

这篇文章涵盖了这些CSS属性的基础知识及其如何共同工作。基本原理后，我们使用Flexbox布局系统在Divi 5中显示了如何在视觉上实现相同的方法。让我们开始！

什么是CSS Flexbox？

移动流量超过台式机更改了网页设计。开发人员需要在手机，平板电脑和台式机上使用的布局。旧方法通常失败。

Flexbox修复了此问题。 CSS Flexbox使元素适应。添加显示：弯曲到一个容器，其直接孩子变得灵活。它们可以根据空间生长，收缩或保持固定。

Flexbox将项目放在直线上，即从左到右行或从头到底部的列。您选择方向。

容器控制布局。您将项目对齐和空间的方式设置如何，例如均匀分布，中心或堆叠。 GAP属性在没有额外边距或填充的项目之间增加了一致的空间。较旧的技术需要棘手的保证金数学，并且经常破产。

传统方法是随机的间距选择：这里的10px，20px，其他地方40px。这些分散的值会导致不一致，并使很难知道适用哪个间距。 GAP属性通过对所有元素使用一个一致的规则来删除猜测。

弹性箱及其属性的快速指南

Flexbox分为两个营地：容器的属性和物品的属性。容器属性会影响整个组，而项目属性可让您调整单个元素。大多数布局只需要其中一些属性，例如：

显示：Flex

通过添加显示：Flex。它的直接孩子成为弹性物品。默认情况下，项目排成一排，而不是像标准块元素那样堆叠。您的间距头痛消失，因为Flex项目遵循的规则与常规元素不同。现在，容器控制其子女（或项目）的行为方式，您将获得可预测的结果，而不是通常的CSS惊喜。

挠性方向

选择哪个方向项目流动。使用一行进行从左到右的安排。

和一列垂直堆叠。

将两个反向添加到一个，然后项目完全翻转其订单。

此选择设置了您的中央轴，这会影响其他属性的工作方式。

从行转换为列的切换会改变合理性和对准项目的行为方式，因此您的计划首先出现。

合理性

该属性沿着您的中央轴分布剩余的空间。物品取他们所需的东西，然后该属性处理其余部分。使用Flex-Start在开始时堆叠所有内容，中间以将项目集中在中间，然后将所有内容延伸到最后。同时，使用相等差距分开的空间分开。空间值使每个项目在两边都相等，而空间却在各处造成了相同的间隙。

对准项目

它处理横轴上的对齐。对于水平布局，这意味着垂直对齐。对于垂直布局，它控制水平定位。它支持诸如Flex-Start，Center，Flex-End，strave和基线之类的值（不是空间*值）。将其设置为中心，而物品与中间保持一致，无论其高度如何。默认值是拉伸的：项目拉伸以填充容器的跨尺寸。如果容器的横向大小是自动的，则通常等于最高的物品，因此物品的高度相等。

屈曲包

确定物品用尽房间时会发生什么。 NowRap通过缩小项目将所有内容保持在一行上。切换到包装纸和不适合新线条的物品，同时保持其首选尺寸。您也可以扭转包裹方向。包装将您的单行变成多行，创建类似于网格的布局。

差距

它增加了项目之间的空间，而不会与边距混乱。设置差距：20px，每个项目都会获得一致的间距。如果需要，您可以设置不同的水平和垂直间隙。该空间仅出现在项目之间，而不是边缘周围。这会比以后更改布局时打破的利润率。

一旦您掌握了它们，这些属性就可以很好地工作。棘手的部分是记住每个人的所作所为并输入所有CSS。您编写一些代码，刷新浏览器，看到它不太正确，然后回去调整。像Divi这样的视觉构建器通过让您单击按钮而不是键入属性名称来将其翻转。

Divi 5使Flexbox Visual

随着我们的建立，学习Flexbox是一回事。记住Jusify-content：之间的空间是另一回事。您花费的时间多于设计属性。您不用编写CSS，而是使用按钮和滑块，这些按钮和滑块准确地显示了每个选项在Divi Builder中的作用。 Divi 5将其带入Flexbox，将抽象概念变成直接的，可单击的控件。

在我们深入研究之前，让我们简要看一下Divi是什么。

什么是Divi？

Divi是一个网站构建器，使WordPress适合那些想要不麻烦的好看网站的人。

您可以在页面上拖动任何200多个模块，然后更改其位置的文本。选择颜色并在您在真实网站上工作时立即观看它们，而不是以后可能对您有些预览。

该主题包括针对餐馆，摄影师，顾问和其他业务的2000多个布局，因此您可以找到自己喜欢的餐厅，并调整它，直到它完美地满足您的需求为止。

主题构建器使您可以控制网站的每个部分。您可以设计出脱颖而出的标题，而不是看起来像其他所有人的标题，构建人们想要阅读的博客页面，甚至使您的404页变得足够有趣，以至于访问者坚持下去而不是离开。

Divi AI可以帮助您快速构建

有一次，制作主题和模板意味着将不同的应用程序杂交以供复制，图像和设计思想。 Divi AI将您需要的所有内容聚集到一个统一的界面中：就在构建网站的位置。

告诉它，您需要文字，然后写它。

询问自定义图像，并创建它们。您甚至可以描述照片编辑并观看进行更改。

另外，它会在您询问时处理代码并构建新部分。

Divi快速站点可以使您免于盯着空白页面，而不知道从哪里开始。您可以从我们的团队设计的初学者站点中挑选，其原始图像和艺术品看起来不错。

您还可以将您的业务描述为Divi快速站点，并让它使用AI从头开始构建一些东西。这些AI构建的站点带有真正的标题，复制和与您的描述相匹配的图像。

用AI生成所有内容，从Unsplash中获取照片，或丢下图像的占位符。首先设置您的字体和颜色，然后让AI围绕您的品牌选择工作，同时随后将所有内容都可以编辑。

Divi 5：未来的网站构建器

Divi 5从头开始重建整个框架。

Visual Builder运行更顺畅，页面更快，代码库可以更有效地支持现代的Web标准。您将获得更清洁的标记，更好的性能，并为现在和未来做好准备。

该界面也会简化。设置在逻辑上看起来更有条理，日常任务需要更少的点击。无论您是构建简单的页面还是复杂的布局，总体体验都会更快地响应。

您会得到相同的视觉构建方法，只有下面的基础要强得多。

Divi 5中的新功能

新的架构为以前无法​​使用的功能打开了门。这些18岁以上的添加改变了您的构建和管理网站的方式。

这是您得到的示例：

• Flexbox布局系统：用于对齐，间距和定位的视觉控制。元素可以自动生长，收缩或包裹到新线条。与嵌套行和模块组一起工作，用于没有代码的复杂布局。
• 嵌套行：将行放入其他无限嵌套的行中。在没有代码解决方案的情况下构建复杂的布局结构。
• 17 WooCommerce模块：完整的产品页面建设者，包括产品库，添加到购物车，评论，评分，股票通知，面包屑，产品元，Upsells等。购物车和结帐模块即将到来。
• 交互系统：创建弹出窗口，切换，滚动动画，鼠标移动效果和视口触发器。混合多个触发器，以进行复杂的行为，例如滚动后淡出的促销横幅。
• 响应式编辑器：让您同时查看，编辑和重置响应式悬停和粘性状态，而无需切换视图模式以更快，更精确且更杂乱的编辑。>>>>
• 循环构建器：构建从数据库中提取的动态内容。创建自定义的帖子布局，产品网格和重复部分。使用WooCommerce产品。
• 选项组预设：创建用于排版，边界，阴影和背景的可重复使用样式。将它们应用于任何兼容元素，而不仅仅是单个模块。
• 设计变量：设置颜色，字体，间距，数字，图像和文本的全局值。一次更改您的主颜色，它将自动更新。
• 高级CSS单元：使用clamp（），calc（），min（）和max（）通过视觉控制功能。无需响应的版式和间距计算所需的代码。
• 相对颜色和HSL：创建数学上美丽的颜色系统。构建颜色变化，当更改基本颜色时，它们会自动保持和谐。

还有更多！我们的开发团队继续添加功能〜每两周准备公开Beta版本。

Divi 5的Flexbox设置的快速概述

Divi 5的视觉方法从Flexbox实现中删除了猜测。您没有记住属性名称和键入CSS，而是获得按钮和滑块，这些按钮和滑块可以准确显示每个控件的作用。看看它有多容易。

1。设置您的第一个弹性行

首先从扩展的模板选择中选择您的行结构。 Divi 5提供了更多的布局选项，包括相等的列，多排网格和多列设置。

Divi 5中的新部分自动从Flexbox开始。当您添加新鲜的行时，它可以随时打开Flex属性。但是，如果您正在使用旧Divi版本的现有部分，则需要通过单击行上的“设置图标”，导航到“设计”选项卡>布局，然后将“块”更改为“ flex”，从而从默认的块布局手动切换来flex。

2。了解方向，流动，对齐

您的布局方向字段确定项目最终的位置。行是默认设置，该设置使项目水平排列。

切换到列，项目垂直堆叠，就像常规的Web布局一样。

这两个选项都带有反向版本，可以完全翻转订单。

同时，合理的内容可以决定沿着主轴剩余的空间发生了什么。对于行，启动时间左，中间中心水平中心，结束右侧对齐。

对于列，启动意味着顶部，中间，将所有内容都推到底部。

除了标准启动，中心和结束对齐之外，您还可以在相同间隙的差距之间拥有空间，非常适合导航菜单或卡片布局。

周围的空间使每个物品在两侧都相等，这在您想要一致的边距时很有用。而且，空间均匀地在各处造成相同的间隙，非常适合平衡视觉间距。

对齐项目垂直于您的流动方向。如果选择行布局，则控制项目的垂直定位。

如果选择了列布局，则可以处理水平对齐。

该中心将所有内容保持在中间，开始位置在开始边缘，末端将它们推到远端，并且延伸使项目填充了可用的空间。

这些控件可以解决常见的布局头痛，而无需自定义CSS计算。

3。用差距控件将事物伸出

GAP控件在容器中的Flex项目之间增加了空间：列，模块和任何内容类型的工作。缝隙创造了呼吸空间，而没有混乱的填充或保证金数学。差距仅出现在项目之间，而不在外边缘周围。

将您的水平缝隙设置为20px，每个列都具有确切的间距。

将垂直差距更改为20px，所有差距将立即更新。

Divi 5支持高级CSS单元，例如视口长度和百分比。您可以使用clamp（）来响应较大的间隙，以在屏幕尺寸之间进行扩展。还支持CALC（2REM + 10PX）等单元的Calc（）函数。

差距控件在这里还支持设计变量。添加一个数字变量，称为“水平列间隙”，用夹具（16px，2vw，32px）作为值。将该变量应用于整个网站的差距控件。

当您需要更紧密的间距时，请编辑变量；每个差距都会立即更新。

4。控制物品如何包装

布局包装控制项目用尽水平空间时会发生什么。默认的没有包装设置可以通过缩小物品适合容器来使所有内容都保持在一行上。切换到包装纸和不适合新线条的物品，同时保持其自然尺寸。

包裹反向的操作与常规包裹相同，但会倾斜方向。新线条出现在前面的线之上，而不是下面。

当项目溢出时，这使您可以控制视觉层次结构。包装行为在不同的屏幕尺寸上保持一致，因此您的布局从桌面到移动设备可以预测地适应而不会破裂。

Divi 5还为您提供包装对齐控件。当您启用Flex包装和多线表单时，此功能会自动出现。将方向设置为行时，包装对齐方式可用于垂直对齐。

同样，对于列方向，选项用于水平对齐。

拉伸使所有线路都会扩展以填充可用的垂直空间。在开始时启动一束线，中间簇在中间，然后将它们推向相反的边缘。

在差距相等的空间之间，散布线之间的空间，周围的空间使每条两侧的呼吸空间都相等，并且空间在所有线之间均匀地产生相同的间隙。

这非常适合卡片布局，图像画廊或任何需要自然流向多行的内容。物品根据可用宽度重新安排时保持其比例和间距。您可以在小屏幕上挤在一起而不会融合在一起。

5。在不同的屏幕尺寸上工作

Divi 5的七个断点为您提供了对布局如何适应的粒状控制。

每个断点都可以独立工作，因此您可以将布局方向切换到移动台上的列，而桌面行布局则保持不变。您可以将所有内容集中在手机上，但要将该空间保持在较大屏幕上的对齐之间。

您的桌面三列设置可以成为移动设备上的单列堆栈，而不会影响中间断点。每个屏幕尺寸都可以最适合观看体验。

新的响应式编辑器使此过程更加顺畅。单击任何设置旁边的响应式编辑图标，以一次查看和修改所有屏幕尺寸的值。

但是，如果您使用clamp（）值来隔离行和列，则可以在不需要手动更改的情况下自动扩展在断点之间。

6。创建选项组预设

在按照所需的方式使用FlexBox布局后，您可以通过单击选项组预设选项并恰当地将这些设置保存为选项组预设。

您的差距值，对齐方式和包装设置被捆绑在一起。单击“保存”时，确切的布局配置将在您的网站上重复使用。当您要使用保存的预设时，请单击新行上的预设图标，然后选择刚保存的预设。

预设使您的高级单位完好无损。您设置的所有数学以及更改甚至是在不同的断点上进行的，您的响应速度距离转移。

立即开始使用Divi 5的Flexbox

Flexbox消除了更改布局时断断续续的边距和填充数学。您停止使用媒体查询和自定义部分的响应式设计。

Divi 5将这些抽象的CSS属性变成视觉控制。您可以单击按钮以设置方向，拖动滑块以调节间隙，然后切换包裹。响应式编辑器可以从一个面板中处理所有七个断点，因此您可以立即看到结果而不是对代码进行猜测。

保存成功的组合作为预设，并在任何地方重复使用。您花时间设计而不是调试CSS语法。