Foundation for Sites6.8.1 变更日志
组件列表

以下是一个基本示例：使用网格时，grid-x 或 grid-y 是 Flex 容器，而 cell 是 Flex 子* 元素。为添加 间距 使用 grid-margin-x 或 grid-padding-x

<div class="grid-x grid-padding-x">
  <div class="cell small-4">Cell 1</div>
  <div class="cell small-4">Cell 2</div>
  <div class="cell small-4">Cell 3</div>
</div>
单元格 1
单元格 2
单元格 3

水平对齐

水平对齐类应用于 Flex 容器。左对齐是默认的，但你可以使用以下类之一来更改它

  • .align-right
  • .align-center
  • .align-justify
  • .align-spaced
edit on codepen button 
<div class="grid-x grid-padding-x"> <!-- Aligned to the left -->
  <div class="cell small-4">Aligned to</div>
  <div class="cell small-4">the left</div>
</div>
<div class="grid-x grid-padding-x align-right"> <!-- Aligned to the right -->
  <div class="cell small-4">Aligned to</div>
  <div class="cell small-4">the right</div>
</div>
<div class="grid-x grid-padding-x align-center"> <!-- Aligned to the center -->
  <div class="cell small-4">Aligned to</div>
  <div class="cell small-4">the center</div>
</div>
<div class="grid-x grid-padding-x align-justify"> <!-- Aligned to the edges -->
  <div class="cell small-4">Aligned to</div>
  <div class="cell small-4">the edges</div>
</div>
<div class="grid-x grid-padding-x align-spaced"> <!-- Aligned to the space around -->
  <div class="cell small-4">Aligned to</div>
  <div class="cell small-4">the space around</div>
</div>
对齐到
左侧
对齐到
右侧
对齐到
中央
对齐到
边缘
对齐到
周围的空间

你可能想知道 .align-justify 和 .align-spaced 之间有什么区别。一个合理的网格（justify-content: space-between）在每个列 之间 平均分配空间。第一列和最后一列固定在网格边缘。

一个间隔网格（justify-content: space-around）在每个列 周围 平均分配空间。这意味着第一列左边和最后一列右边始终有空间。

水平对齐类是 justify-content CSS 属性的简写。 深入了解 justify-content。

垂直对齐

垂直对齐可以应用于 Flex 容器，这将自动对齐所有子元素，或应用于 Flex 子* 元素，这将只对齐该元素。

拉伸对齐是默认的。要设置父项对齐，请使用以下类

  • .align-top
  • .align-middle
  • .align-bottom
  • .align-stretch

请注意，对于垂直对齐，我们使用术语“中间”表示中点，而对于水平对齐，我们使用术语“中央”。由于我们无法有两个具有相同名称的 CSS 类，因此我们使用不同的术语。

edit on codepen button 
<div class="grid-x grid-padding-x align-top">
  <div class="cell small-4">I'm at the top (default)</div>
  <div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>
我在顶部（默认）
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
edit on codepen button 
<div class="grid-x grid-padding-x align-middle">
  <div class="cell small-4">I'm in the middle</div>
  <div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>
我在中间
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
edit on codepen button 
<div class="grid-x grid-padding-x align-bottom">
  <div class="cell small-4">I'm at the bottom</div>
  <div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>
我在底部
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
edit on codepen button 
<div class="grid-x grid-padding-x align-stretch">
  <div class="cell small-4">These cells have the same height</div>
  <div class="cell small-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>
这些单元格具有相同高度
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.

要对齐单个子元素，请使用以下类。它们使用与父级类相同的对齐术语，但是这些类从 .align-self- 开始，而不是从 .align- 开始。

  • .align-self-top
  • .align-self-middle
  • .align-self-bottom
  • .align-self-stretch
edit on codepen button 
<div class="grid-x grid-padding-x">
    <div class="cell small-3 align-self-bottom"><div class="demo">Align bottom</div></div>
    <div class="cell small-3 align-self-middle"><div class="demo">Align middle</div></div>
    <div class="cell small-3 align-self-stretch"><div class="demo">Align stretch</div></div>
    <div class="cell small-3 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
  </div>
底部对齐
中间对齐
拉伸对齐
顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

居中对齐

中央对齐可以应用于 Flex 容器，这会自动将所有子元素水平和垂直居中。要将其设置为你的布局，只需使用类：.align-center-middle。

我们这里将使用 `.text-center` 类仅作演示用途。

edit on codepen button 
<div class="grid-x grid-padding-x align-center-middle text-center" style="height: 200px;">
  <div class="cell small-4">I am in the center-middle</div>
  <div class="cell small-4">I am also centrally located</div>
</div>
我在中心中间
我也位于中央

基础 Flexbox 帮助类

Foundation 还包括一些帮助类，用于快速将弹性容器和方向属性应用到元素上。

若要将某个内容设为弹性容器，只需应用

  • .flex-container

且要将其弹性方向从行更改为列，则可以使用帮助类

  • .flex-dir-row（默认）
  • .flex-dir-row-reverse
  • .flex-dir-column
  • .flex-dir-column-reverse

对于子元素，有 3 个快速的帮助类用于应用 flex 属性。这些属性控制容器如何相较于其同级元素占据空间

  • .flex-child-auto（自动大小弹性子元素）
  • .flex-child-grow（弹性子元素，将增长以占据所有可能的空间）
  • .flex-child-shrink（弹性子元素，将缩小到可能的最小空间）
edit on codepen button 
<div class="grid-x grid-padding-x">
  <div class="cell small-4 flex-container flex-dir-column">
    <div class="callout primary flex-child-auto">Auto</div>
    <div class="callout primary flex-child-auto">Auto</div>
    <div class="callout primary flex-child-shrink">Shrink</div>
  </div>
  <div class="cell small-4">
  </div>
  <div class="cell small-4 align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
</div>
自动
自动
收缩
顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit。非 harum laborum cum voluptate vel，eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat，consequuntur porro temporibus。Nisi，ex？顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit。非 harum laborum cum voluptate vel，eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat，consequuntur porro temporibus。Nisi，ex？顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit。非 harum laborum cum voluptate vel，eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat，consequuntur porro temporibus。Nisi，ex？

响应式类

所有这些帮助类都以响应式种类出现，以所有已命名的断点开头。

这些纯香草弹性盒帮助类还具有可选的移动端优先响应式类，因此设置一个类将应用于小型断点和大断点，除非被更大断点的类覆盖。示例：class="flex-child-shrink large-flex-child-auto" 将在小型和中型断点处收缩，然后在大断点处自动展开。

可以通过将 $flexbox-responsive-breakpoints 设置为 false 来禁用这些可选的响应式类。请参阅此处

edit on codepen button 
<div class="grid-x grid-padding-x">
  <div class="cell small-12 flex-container flex-dir-column large-flex-dir-row">
    <div class="callout primary flex-child-auto">Auto</div>
    <div class="callout primary flex-child-auto">Auto</div>
    <div class="callout primary flex-child-shrink large-flex-child-auto">Auto on Large</div>
  </div>
  <div class="cell small-12 align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
</div>
自动
自动
大屏自动
顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit。非 harum laborum cum voluptate vel，eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat，consequuntur porro temporibus。Nisi，ex？顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit。非 harum laborum cum voluptate vel，eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat，consequuntur porro temporibus。Nisi，ex？顶部对齐。Lorem ipsum dolor sit amet, consectetur adipisicing elit。非 harum laborum cum voluptate vel，eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat，consequuntur porro temporibus。Nisi，ex？

源顺序

弹性盒支持源顺序，无需使用奇怪的相对定位技巧，即可轻松地在不同的屏幕尺寸上重新排列列。

CSS 属性很容易记住。

.element {
  order: 1;
}

一行中的列将按其 order 属性排序。较小的数字排在前面。如果多列具有相同的数字，则按其在 HTML 中出现的顺序排序。

我们有一组类，可以轻松地在你的 HTML 中设置源顺序。它们也以响应式形式出现，允许你在不同的屏幕尺寸上重新排列网格。

观看视频中的这一部分

edit on codepen button 
<div class="grid-x grid-padding-x">
  <div class="cell small-6 small-order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
  <div class="cell small-6 small-order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
</div>
此列在小屏上排第二，在中屏及以上屏幕上排第一。
此列在小屏上排第一，在中屏及以上屏幕上排第二。

帮助混合

如果你正在使用 Foundation 的 Sass 版本，那么也可以将上述帮助程序作为混合使用。

对于父级对齐，请使用 flex-align()。你可以传入水平对齐（$x）、垂直对齐（$y）或两者。

.container {
  @include flex-align($x: center, $y: stretch);
}

对于子级对齐，请使用 flex-align-self()。你可以传入任何垂直对齐。

.sidebar {
  @include flex-align-self(bottom);
}

有兴趣构建你自己的弹性盒组件吗？使用 flex() 混合开始。

.flexish-thang {
  @include flex;
  @include flex-align(center, middle);
}

Sass 参考

变量

使用项目中的这些 Sass 变量，可以在项目设置文件中自定义此组件的默认样式。

名称类型默认值说明
$flex-source-ordering-count 数字 6

`source ordering` 计数的默认值
$flexbox-responsive-breakpoints 布尔值 真

快速禁用/启用纯香草弹性帮助程序的响应断点。
$xy-grid 布尔值 真

启用 XY 网格。
$grid-container 数字 $global-width

网格容器的最大宽度。
$grid-columns 数字 12

网格中使用的列数。
$grid-margin-gutters 映射或长度 "small": 20px
"medium": 30px

使用边距网格时，不同屏幕大小下单元格之间的边距量。要只使用一个大小，将变量设置为一个数字，而不是映射。
$grid-padding-gutters 映射或长度 $grid-margin-gutters

使用填充网格时，不同屏幕大小下单元格中的填充量。要只使用一个大小，将变量设置为一个数字，而不是映射。
$grid-container-padding 映射或长度 $grid-padding-gutters

填充网格容器时要使用的填充量。
$grid-container-max 数字 $global-width

应用于网格容器的最大宽度
$xy-block-grid-max 数字 8

XY 块网格中的最大单元格数。

混合

我们使用这些混合生成此组件的最终 CSS 输出。你可以自己使用混合来从我们的组件生成自己的类结构。

flex

@include flex;

通过向元素添加 display: flex 来启用 flexbox。

flex-align

@include flex-align($x, $y);

水平或垂直对齐 flex 容器中的项目。

参数类型默认值说明
$x 关键字 空

要使用的水平对齐。可以是 left、right、center、justify 或 spaced。或者，将它设置为 null（默认值）以不设置水平对齐。
$y 关键字 空

要使用的垂直对齐。可以是 top、bottom、middle 或 stretch。或者，将它设置为 null（默认值）以不设置垂直对齐。

flex-align-self

@include flex-align-self($y);

在 flex 行中垂直对齐单个列。将此混合应用于 flex 列。

参数类型默认值说明
$y 关键字 空

要使用的垂直对齐。可以是 top、bottom、middle 或 stretch。或者，将它设置为 null（默认值）以不设置垂直对齐。

flex-order

@include flex-order($order);

更改 flex 子级的来源顺序。具有较低数字的子级在布局中首先出现。

参数类型默认值说明
$order 数字 0

要应用的订单号。

flex-direction

@include flex-direction($direction);

更改 flex-direction

参数类型默认值说明
$direction 关键字 row

要使用的 Flex 方向。可以是

  • 行（默认值）：与文字方向相同
  • 反向行：与文字方向相反
  • 列：与行相同，但从上到下
  • 反向列：与反向行的相同，从上到下

xy-grid-frame

@include xy-grid-frame($vertical, $nested, $gutters, $breakpoint, $include-base);

修改以赋予其“框架”行为（无溢出、无换行、拉伸行为）的网格

参数类型默认值说明
$vertical 布尔值 false

网格是垂直的还是水平的。应与网格匹配。
$nested 布尔值 false

网格是否嵌套。如果 nested 为 true，则将框架设置为 100% 的高度，否则将为 100vh。
$gutters 数字或映射 空

用于间隙的映射或单一值。
$breakpoint 字符串 空

间隙映射中断点大小的名称，以从中获取大小。
$include-base 布尔值 真

包括不随断点而变化的基本样式。

xy-cell-block

@include xy-cell-block($vertical);

修改单元格以赋予其“块”行为（自动溢出、惯性滚动）

参数类型默认值说明
$vertical 布尔值 false

网格是垂直的还是水平的。应与网格匹配。

xy-cell-block-container

@include xy-cell-block-container;

用于包含多个块的网格框架内的容器。通常用作 .cell 的修饰符，允许单元格传递沿弹性尺寸约束/从父元素到子元素。

xy-cell-base

@include xy-cell-base($size);

设置单元格的基本 flex 属性。

参数类型默认值说明
$size 关键字 full

单元格的大小。接受 full、auto、shrink、grow 或任何其他表示单元格大小的值（将被视为 shrink）。

xy-cell-reset

@include xy-cell-reset($vertical);

重置单元格的宽度（或垂直为 true 时的高度），并消除其间隙。

参数类型默认值说明
$vertical 布尔值 false

设置为 true 以输出垂直（高度）样式，而不是宽度。

xy-cell-size

@include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);

设置单元格大小属性。

对于有边距的单元格，需要与间隙相关的参数（默认为边距），因为边距为宽度的一部分。

参数类型默认值说明
$size 关键字或数字 full

单元格大小。可以是 full （100% 宽度）、 auto （使用所有可用空间）、 shrink （仅仅使用必需的空间）或任何分数（6、50%、1 of 2 或 1/2 等）。
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

要输出的间隙类型。接受 margin、padding 或 none。
$breakpoint 字符串 空

要从中获取大小的间隙地图中的断点大小的名称。如果为 auto，则生成适合自适应间隙的大小。如果与 breakpoint() 混合使用，除非手动输入，否则系统会自动设置。
$vertical 布尔值 false

设置为 true 以输出垂直（高度）样式，而不是宽度。

xy-cell-gutters

@include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);

设置单元格的间隙属性。

参数类型默认值说明
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

要输出的间隙类型。接受 margin、padding 或 none。
$gutter-position 列表 空

应用间隙的位置。接受 top、bottom、left、right 中的任意组合。对于水平单元格默认为 right left，对于垂直单元格默认为 top bottom。
$breakpoint 字符串 空

要从中获取大小的间隙地图中的断点大小的名称。如果为 auto，则生成自适应间隙。如果与 breakpoint() 混合使用，除非手动输入，否则系统会自动设置。
$vertical 布尔值 false

要输出的间隙的方向。请参阅 $gutter-position。

xy-cell

@include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);

为网格创建单元格。

参数类型默认值说明
$size 关键字或数字 full

单元格大小。可以是 full （100% 宽度）、 auto （使用所有可用空间）、 shrink （仅仅使用必需的空间）或任何分数（6、50%、1 of 2 或 1/2 等）。
$gutter-output 布尔值 空

[已弃用] 是否输出间隙。
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

要输出的间隙类型。接受 margin、padding 或 none。
$gutter-position 列表 空

应用间隙的位置。接受 top、bottom、left、right 中的任意组合。对于水平单元格默认为 right left，对于垂直单元格默认为 top bottom。
$breakpoint 字符串 空

要从中获取大小的间隙地图中的断点大小的名称。如果为 auto，则生成自适应间隙。如果与 breakpoint() 混合使用，除非手动输入，否则系统会自动设置。
$vertical 布尔值 false

设置为 true 以输出垂直（高度）样式，而不是宽度。
$output 列表 基本大小间隙

要输出的单元格部分。您需要分别生成单元格的其他部分，否则可能无法正常工作。

xy-cell-static

在 v6.6.0 中已弃用

@include xy-cell-static($size, $gutter-output, $gutters, $gutter-type, $breakpoint, $vertical);

创建单个断点大小的网格。用于生成网格类。

xy-cell-static() 已弃用，并将被移除。改用 xy-cell() 和 $output: (size gutters) 来不生成单元格基准。请参阅 https://git.io/foundation-6-6-0 中的迁移说明。

参数类型默认值说明
$size 关键字或数字 full

单元格大小。可以是 full （100% 宽度）、 auto （使用所有可用空间）、 shrink （仅仅使用必需的空间）或任何分数（6、50%、1 of 2 或 1/2 等）。
$gutter-output 布尔值 真

是否输出间隙。对于边距间隙来说始终为 true。
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

用于间隙的映射或单一值。
$breakpoint 字符串 空

要从中获取大小的间隙地图中的断点大小的名称。如果与 breakpoint() 混合使用，除非手动输入，否则系统会自动设置。
$vertical 布尔值 false

设置为 true 以输出垂直（高度）样式，而不是宽度。

xy-grid-collapse

@include xy-grid-collapse($selector, $gutter-type, $gutter-position, $min-breakpoint);

折叠网格及其中的单元格。

参数类型默认值说明
$selector 字符串 .cell

要从中移除间隙的子元素。
$gutter-type 关键字 margin

要移除的间隙类型。
$gutter-position 列表 right left

要从中移除间隙的位置。接受 top、bottom、left、right 中的任意组合。
$min-breakpoint 关键字 $-zf-zero-breakpoint

$breakpoint-classes 中针对折叠间隙所用的最小断点。

xy-grid-container

@include xy-grid-container($width, $padding);

创建一个最大宽度容器，设计用来容纳网格内容。

参数类型默认值说明
$width 数字 $grid-container

限制容器宽度的宽度。
$padding 数字 $grid-container-padding

容器填充。

xy-grid

@include xy-grid($direction, $wrap);

为弹性单元格创建一个容器。

参数类型默认值说明
$direction 关键字 horizontal

单元格内的方向——水平或垂直。
$wrap 布尔值 真

单元格内是否进行换行。

xy-gutters

@include xy-gutters($gutters, $gutter-type, $gutter-position, $negative);

为单元格/容器创建间隙。

参数类型默认值说明
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

要输出的间隙类型。接受边距或填充。
$gutter-position 列表 right left

应用间隙的位置。接受 top、bottom、left、right 中的任意组合。
$negative 布尔值 false

作为负值应用间隙。通常用于嵌套网格。

xy-grid-layout

@include xy-grid-layout($n, $selector, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);

调整子元素尺寸，使每行显示 $n 个项目。

参数类型默认值说明
$n 数字 无

每行显示的元素数。
$selector 字符串 '.cell'

用于子元素的选择器。
$gutter-output 布尔值 空

[已弃用] 是否输出间隙。
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

要输出的间隙类型。接受 margin、padding 或 none。
$gutter-position 列表 空

应用间隙的位置。接受 top、bottom、left、right 中的任意组合。对于水平单元格默认为 right left，对于垂直单元格默认为 top bottom。
$breakpoint 字符串 空

用于生成单元格的断点。如果与 breakpoint() 混合使用，则除非手动输入，否则会自动设置。
$vertical 布尔值 false

设置为 true 以输出垂直（高度）样式，而不是宽度。
$output 列表 基本大小间隙

要输出的单元格部件。您将需要分别生成单元格的其他部件，否则可能无法正常工作。

xy-cell-offset

@include xy-cell-offset($n, $gutters, $gutter-type, $breakpoint, $vertical);

向右/向下偏移一列 $n 列。

参数类型默认值说明
$n 数字或列表 无

偏移量。您可以传入 xy-cell() 混合接受的任何值，例如 6、50% 或 1 of 2。
$gutters 数字或映射 $grid-margin-gutters

用于自适应间距的间距映射或单个值。
$gutter-type 关键字 margin

要使用的间距类型。可以是 margin 或 padding
$breakpoint 数字或数组或关键字 空

用于 $gutters 的断点。它可以是断点名称、断点列表或 auto（用于所有断点）。如果给定一个列表，则会生成媒体查询。如果与 breakpoint() 混合使用，则除非手动输入，否则会自动设置。
$vertical 布尔值 false

设置偏移量方向。如果设置为 true，则将应用 margin-top。

函数

xy-cell-base

xy-cell-base($size)

为单元格基准返回适当的 CSS flex 值。

参数类型默认值说明
$size 关键字 full

单元格的大小。接受 full、auto、shrink、grow 或任何其他表示单元格大小的值（将被视为 shrink）。

xy-cell-gutters

xy-cell-gutters($gutters, $breakpoint)

计算单元格间距的大小。

参数类型默认值说明
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$breakpoint 字符串 空

要获取间距的间距映射中的断点大小名称。如果为 auto，则返回自适应间距映射 $gutters。如果与 breakpoint() 混合使用，则除非手动输入，否则会自动设置。

xy-cell-size

xy-cell-size($size)

返回单元格的百分比大小。

参数类型默认值说明
$size 数字或列表 $grid-columns

制作该单元格的大小。您可以以多种格式传递值，例如 6、50%、1 of 2 或 1/3。

xy-cell-size-css

xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint)

为单元格大小返回适当的 CSS 值。

对于有边距的单元格，需要与间隙相关的参数（默认为边距），因为边距为宽度的一部分。

参数类型默认值说明
$size 关键字或数字 full

单元格大小。可以是 full、auto、shrink 或任何分数，如 6、50%、1 of 2 或 1/2。
$gutters 数字或映射 $grid-margin-gutters

用于间隙的映射或单一值。
$gutter-type 关键字 margin

要输出的间隙类型。接受 margin、padding 或 none。
$breakpoint 字符串 空

要获取间距的间距映射中的断点大小名称。如果为 auto，则返回一个大小映射，以适应自适应间距。如果与 breakpoint() 混合使用，则除非手动输入，否则会自动设置。

xy-cell-offset

xy-cell-offset($n, $gutters, $gutter-type, $breakpoint)

返回偏移单元格的适当 CSS 值。

参数类型默认值说明
$n 数字或列表 无

偏移量。您可以传入 xy-cell() 混合接受的任何值，例如 6、50% 或 1 of 2。
$gutters 数字或映射 $grid-margin-gutters

用于自适应间距的间距映射或单个值。
$gutter-type 关键字 margin

要使用的间距类型。可以是 margin 或 padding
$breakpoint 字符串 空

要从中获取大小的间隙地图中的断点大小的名称。如果与 breakpoint() 混合使用，除非手动输入，否则系统会自动设置。