Oxygen Builder页面构建器布局间距概览

　　Oxygen Builder的flexbox驱动的布局引擎可以轻松创建您可以想象的任何布局。可以使用Sections、Columns和Divs定义页面的结构。然后，您将标题、文本、视频等内容放置在这些元素中，并使用Oxygen的布局控件控制它们的布局和对齐方式。

　　本文，晓得博客为你介绍Oxygen Builder页面构建器布局间距概览功能。

　　通常，您的页面将由多个Section元素构成。您页面上的所有其他元素都将放置在这些部分中。Section元素自动将其内部的内容限制为不超过页面宽度。您可以在“ Advanced ”->“ Size&Spacing ”->“ Container Width ”中为该部分指定自定义宽度。

　　Columns元素用于基于列的内容。您可以从预设的列布局中进行选择，或手动指定各个列的宽度。Columns元素具有响应式控件，因此在指定的屏幕宽度下。

　　Div元素最常用于对Section或Column内的元素进行分组，以仅控制这些元素的布局，而不影响Section或Column内其他元素的布局。例如，您可以将水平堆叠的Div放置在垂直堆叠的Section内，以在垂直布局内创建水平布局。

　　Sections、Columns和Divs具有控制放置在其中的元素的布局和对齐方式的设置。

　　1、Child Element Layout子元素布局

　　Sections、Columns列或div的子元素可以水平或垂直堆叠。您可以根据屏幕宽度更改子元素布局设置，以使您的布局响应。

　　2、Item Alignment项目对齐

　　一旦选择了如何在容器中堆叠子元素，您将看到用于在该容器中对齐元素的其他设置。这些设置使您可以将元素与一侧或另一侧对齐，将它们置于中间，或将它们放置在容器的顶部或底部附近。

　　将鼠标悬停在元素的边缘以显示间距拖动条。单击并拖动此栏以调整元素间距。间距有两种：

　　可以在“Advanced”->“Size&Spacing”手动指定这些值，而不是使用拖动条。

　　注意：CSS GRID可用作SECTION、DIV、GALLERY、EASY POSTS和REPEATER元素中的布局选项。

　　Columns列

Column Count:列数：选择您想要在网格中有多少列。
Auto-Fit Columns：这会覆盖列数，并根据“最小宽度”值将尽可能多的子项放在一行上。
Min Width最小宽度：设置每个元素的最小宽度。如果在使网格响应时遇到问题，如果一行中有多个子项，则可能需要减小此宽度。
Max Width最大宽度：设置每个元素的最大宽度。默认的“1fr”单位意味着每列将占用基于列数的可用空间的一个相等部分。如果您指定了4列，则1fr等于25%..
Gap:间隙：设置网格列之间的间隙。
Horizontal Item Alignment水平项对齐（左、中、右、拉伸）：如果Grid子项未占用可用空间的全部宽度，则此设置将根据“水平项对齐”选择在其Grid单元格内对齐子项。

　　Rows行

　　Row Behaviour

Auto自动：将根据网格中子项的数量使用正确的行数。
Explicit显式：设置行数、最小和最大高度。
Row Count行数：设置您想要在网格中的行数。这在使用Child Span Override时很有用（见下文）。
Min Height最小高度：设置最小行高。
Max Height最大高度：设置最大行高。
Match Height of Tallest Child checkbox匹配最高子项的高度复选框：此选项使所有行的高度相同，基于网格中最高的子项。.
Gap间隙：设置网格行之间的间隙。
Vertical Item Alignment(Start,Center,End,Stretch)：如果Grid子项没有占据可用空间的全部高度，则此设置将根据Vertical Item Alignment选择在其网格单元格内对齐子项。

　　此控件将反映Grid中的项目数。单击其中一个以明确设置它们将跨越的行数或列数。