Foundation for Sites6.8.1 變更日誌
元件清單

Flexbox 實用程式

彈性盒狀模型實用程式類別和混合，讓使用彈性盒狀模型變得更簡單。

彈性盒狀模型實用程式

彈性盒狀模型讓水平和垂直對齊變得輕鬆，透過 CSS 屬性 align-items、align-self 和 justify-content。Foundation 包含一些適用於這些屬性的類別，這些類別可與任何啟用彈性盒狀模型的元件搭配使用。

若要了解這些類別如何運作，您需要了解彈性盒狀模型所建立的親子關係。具有 display: flex 的元素是彈性盒狀模型父代，可以水平或垂直對齊其子代。彈性盒狀模型父代的所有直接子代都是彈性盒狀模型子代。彈性盒狀模型子代可以垂直對齊自身。

在以下範例中，我們使用 [XY 格線](xy-grid.html) 類別，而不是 [舊版彈性盒狀模型格線](flex-grid.html) 的 row 和 column。這些範例適用於 row 和 column，但舊版彈性盒狀模型格線將從 Foundation 7 中移除，因此我們建議使用 XY 格線。

以下是一個基本範例：使用格線時，grid-x 或 grid-y 是彈性盒狀模型父代，而 cell 是彈性盒狀模型子代。使用 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

水平對齊

水平對齊類別套用於彈性盒狀模型父代。左對齊是預設值，但您可以使用下列其中一個類別來變更此設定

  • .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。

垂直對齊

垂直對齊可以套用在彈性父層（會自動對齊所有子層）或彈性子層（只會對齊該元素）。

延伸對齊是預設值。若要設定父層對齊，請使用下列類別

  • .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?

中央對齊

中央對齊可以套用在彈性父層，這會自動將所有子層在水平和垂直方向上對齊至中央。若要將此設定套用至您的版面配置，只需使用類別：.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-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. Non 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. Non 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. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

回應式類別

所有這些輔助類別都有回應式變體，其前綴為您所有命名的斷點。

這些香草 Flexbox 輔助類別還有一個選用的行動裝置優先回應式類別，因此設定類別會套用至小型斷點和大斷點，除非被較大斷點的類別覆寫。範例：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. Non 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. Non 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. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

來源排序

Flexbox 支援來源排序，讓您在不同的螢幕尺寸上重新排列欄位時，不必使用奇怪的相對定位技巧。

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>
此欄位在小螢幕上會排在第二個，在中型及以上螢幕上會排在第一個。
此欄位在小螢幕上會排在第一個，在中型及以上螢幕上會排在第二個。

輔助 Mixin

如果您使用 Foundation 的 Sass 版本，您也可以存取上述輔助工具作為 Mixin。

對於父層級對齊，請使用 flex-align()。您可以傳入水平對齊 ($x)、垂直對齊 ($y) 或兩者。

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

對於子層級對齊，請使用 flex-align-self()。您可以傳入任何垂直對齊。

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

有興趣建立自己的 flexbox-ey 元件嗎？使用 flex() Mixin 來開始。

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

Sass 參考

變數

此元件的預設樣式可以使用專案的 設定檔 中的這些 Sass 變數進行自訂。

名稱類型預設值說明
$flex-source-ordering-count 數字 6

來源排序計數的預設值
$flexbox-responsive-breakpoints 布林值 true

快速停用/啟用 Vanilla Flex 輔助工具的回應式中斷點。
$xy-grid 布林值 true

啟用 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 區塊格狀中的最大儲存格數目。

Mixins

我們使用這些 mixins 來建構此元件的最終 CSS 輸出。您可以自行使用 mixins，從我們的元件建構您自己的類別結構。

flex

@include flex;

透過將 display: flex 加入元素來啟用 flexbox。

flex-align

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

水平或垂直對齊 flex 容器中的項目。

參數類型預設值說明
$x 關鍵字 null

要使用的水平對齊。可以是 left、right、center、justify 或 spaced。或者，將其設定為 null (預設值) 以不設定水平對齊。
$y 關鍵字 null

要使用的垂直對齊。可以是 top、bottom、middle 或 stretch。或者，將其設定為 null (預設值) 以不設定垂直對齊。

flex-align-self

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

垂直對齊 flex 列中的單一欄位。將此 mixin 套用至 flex 欄位。

參數類型預設值說明
$y 關鍵字 null

要使用的垂直對齊。可以是 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 方向。可以是

  • row (預設值)：與文字方向相同
  • row-reverse：與文字方向相反
  • column：與 row 相同，但由上到下
  • column-reverse：與 row-reverse 相同，但由上到下

xy-grid-frame

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

修改格狀以賦予其「框架」行為 (無溢位、無換行、延伸行為)

參數類型預設值說明
$vertical 布林值 false

格狀是垂直還是水平。應與格狀相符。
$nested 布林值 false

格狀是否巢狀。如果 nested 為 true，則將框架設定為 100% 高度，否則將為 100vh。
$gutters 數字或對應 null

對應或單一值，用於間距。
$breakpoint 字串 null

間距對應中斷點大小的名稱，用於取得大小。
$include-base 布林值 true

包含不會因中斷點而異的基礎樣式。

xy-cell-block

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

修改儲存格以賦予其「區塊」行為 (自動溢位、慣性捲動)

參數類型預設值說明
$vertical 布林值 false

格狀是垂直還是水平。應與格狀相符。

xy-cell-block-container

@include xy-cell-block-container;

包含多個區塊的格狀框架內部容器。通常用作 .cell 的修改器，以允許儲存格傳遞 flex 調整大小限制/從父層到子層。

xy-cell-base

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

設定儲存格的基本彈性屬性。

參數類型預設值說明
$size 關鍵字 full

儲存格的大小。接受 full、auto、shrink、grow 或任何其他代表儲存格大小的值（將視為 shrink）。

xy-cell-reset

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

重設儲存格的寬度（或如果 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 字串 null

間距地圖中斷點大小的名稱，用於取得大小。如果為 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 清單 null

要套用間距的位置。接受 top、bottom、left、right 的任何組合。對於水平儲存格，預設為 right left；對於垂直儲存格，預設為 top bottom。
$breakpoint 字串 null

間距地圖中斷點大小的名稱，用於取得大小。如果為 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 布林值 null

[已棄用] 是否要輸出間距。
$gutters 數字或對應 $grid-margin-gutters

對應或單一值，用於間距。
$gutter-type 關鍵字 margin

要輸出的間距類型。接受 margin、padding 或 none。
$gutter-position 清單 null

要套用間距的位置。接受 top、bottom、left、right 的任何組合。對於水平儲存格，預設為 right left；對於垂直儲存格，預設為 top bottom。
$breakpoint 字串 null

間距地圖中斷點大小的名稱，用於取得大小。如果為 auto，則會產生回應式間距。如果與 breakpoint() 混用，則會自動設定此值，除非手動輸入。
$vertical 布林值 false

設為 true 以輸出垂直（高度）樣式，而非寬度。
$output 清單 base size gutters

要輸出的儲存格部分。您需要分別產生儲存格的其他部分，否則可能無法正常運作。

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

是否要輸出間距。對於外框間距，永遠為 true。
$gutters 數字或對應 $grid-margin-gutters

對應或單一值，用於間距。
$gutter-type 關鍵字 margin

對應或單一值，用於間距。
$breakpoint 字串 null

間距對應表中中斷點大小的名稱，用於取得大小。如果與 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 布林值 true

儲存格內部是否要換行。

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 布林值 null

[已棄用] 是否要輸出間距。
$gutters 數字或對應 $grid-margin-gutters

對應或單一值，用於間距。
$gutter-type 關鍵字 margin

要輸出的間距類型。接受 margin、padding 或 none。
$gutter-position 清單 null

要套用間距的位置。接受 top、bottom、left、right 的任何組合。對於水平儲存格，預設為 right left；對於垂直儲存格，預設為 top bottom。
$breakpoint 字串 null

要使用於儲存格產生的中斷點。如果與 breakpoint() 混用，則會自動設定，除非手動輸入。
$vertical 布林值 false

設為 true 以輸出垂直（高度）樣式，而非寬度。
$output 清單 base size gutters

要輸出的儲存格部分。您需要分別產生儲存格的其他部分，否則可能無法正常運作。

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 數字或陣列或關鍵字 null

用於 $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 字串 null

從間距地圖中取得斷點大小的名稱，以取得大小。如果為 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 字串 null

從間距地圖中取得斷點大小的名稱，以取得大小。如果為 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 字串 null

間距對應表中中斷點大小的名稱，用於取得大小。如果與 breakpoint() 混用，則會自動設定，除非手動輸入。