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

彈性格線

Foundation 6 的新功能是 Flexbox 驅動的格線，您可以使用它來取代傳統的浮動格線。

彈性網格的運作方式與標準浮動網格非常相似，但包含許多只有彈性盒狀模型才有的實用功能，例如水平和垂直對齊、自動調整大小和更輕鬆的來源排序。

瀏覽器支援

彈性網格僅在 Chrome、Firefox、Safari 6+、IE10+、iOS 7+ 和 Android 4.4+ 中受支援。Android 2 中支援彈性盒狀模型，但不足以與此網格搭配使用。(查看彈性盒狀模型瀏覽器支援。)我們建議僅在能接受純粹尖端瀏覽器支援的專案中使用彈性網格。

在 Firefox 43+ 中，彈性欄中的影像可能會溢出其容器。若要修正此問題，請將已定義的 width 新增至彈性欄中的任何影像，或對滿版影像使用 width: 100%。

匯入

在影片中觀看此部分
**從 Foundation v6.4 開始，彈性網格已預設停用**，改由新的 [XY 網格](xy-grid.html) 取代。除非您需要支援 IE 10，否則建議使用 XY 網格。

若要在 Foundation v6.4+ 中使用彈性網格，您需要

  • 在 CDN 連結或套件管理員中：匯入 foundation-flex.css 取代 foundation.css。
  • 在 Sass 中：將 $xy-grid 設定為 false。

如果您使用的是 Sass 版本的 Foundation，您可以啟用全架構彈性盒狀模型模式，並新增彈性網格和彈性盒狀模型輔助類別的匯出。 深入了解如何啟用彈性盒狀模型模式。

您可以使用下列方式手動產生彈性網格

@import 'foundation';

// @include foundation-grid;
@include foundation-flex-classes;
@include foundation-flex-grid;

彈性網格使用與浮動網格相同的設定變數來調整間距大小、欄數等。請參閱 Sass 變數參考 以取得預設網格，了解如何自訂彈性網格。

標準網格和彈性網格使用一些相同的類別，即 .row 和 .column，而且無法很好地搭配使用。如果您要在同一個專案中使用這兩個網格，我們建議使用每個網格的 Sass 混入，而不是預設 CSS。

基礎

彈性網格的結構與浮動網格相同。列使用類別 .row，欄使用類別 .column (或 .columns)。您習慣使用的相同網格類別，例如 .small-6、.medium-12 等，也可以用來進行基本的百分比大小調整。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-6">6 columns</div>
  <div class="columns small-6">6 columns</div>
</div>
<div class="row">
  <div class="columns medium-6 large-4">12/6/4 columns</div>
  <div class="columns medium-6 large-8">12/6/8 columns</div>
</div>
6 欄
6 欄
12/6/4 欄
12/6/8 欄

進階大小

如果沒有將大小類別新增至欄，它將會單純擴充填滿剩餘空間。我們稱這種行為為擴充行為。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>
4 欄
剩餘的空間！

多個擴充欄會平均分享剩餘的空間。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
  <div class="columns">Whatever's left!</div>
</div>
4 欄
剩餘的空間！
剩餘的空間！

也可以透過新增 .shrink 類別，讓欄收縮。這表示它只會佔用其內容所需的水平空間。

在影片中觀看此部分

edit on codepen button 
<div class="row">
  <div class="columns shrink">Shrink!</div>
  <div class="columns">Expand!</div>
</div>
收縮！
擴充！

回應式調整

如果沒有提供明確大小，彈性格線中的欄不會換行，這正是自動調整大小的神奇之處。若要讓欄在較小的螢幕上堆疊，請手動新增類別 .small-12。

若要從百分比或收縮行為切換回擴充行為，請使用類別 .medium-expand 或 .large-expand。在以下範例中，欄在小螢幕上堆疊，而在大螢幕上則會等寬。

edit on codepen button 
<div class="row">
  <div class="columns small-12 large-expand">One</div>
  <div class="columns small-12 large-expand">Two</div>
  <div class="columns small-12 large-expand">Three</div>
  <div class="columns small-12 large-expand">Four</div>
  <div class="columns small-12 large-expand">Five</div>
  <div class="columns small-12 large-expand">Six</div>
</div>
一
二
三
四
五
六

自動堆疊

我們有一些簡寫類別可供上述行為使用。使用 .[size]-unstack 類別預設堆疊列中的所有欄，然後在較大的螢幕尺寸上取消堆疊，讓每個欄都等寬。

edit on codepen button 
<div class="row medium-unstack">
  <div class="columns">One</div>
  <div class="columns">Two</div>
  <div class="columns">Three</div>
  <div class="columns">Four</div>
  <div class="columns">Five</div>
  <div class="columns">Six</div>
</div>
一
二
三
四
五
六

欄對齊

彈性格線中的欄可以沿著其父列的水平或垂直軸對齊。

水平對齊

欄可以像對齊段落中的文字一樣對齊。預設情況下，所有欄都對齊到左側（或 RTL 中的右側），但可以透過將 .align-[dir] 類別新增至彈性列來覆寫此設定。

在影片中觀看此部分

edit on codepen button

<div class="row">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the left</div>
</div>
<div class="row align-right">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the right</div>
</div>
<div class="row align-center">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the middle</div>
</div>
<div class="row align-justify">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the edges</div>
</div>
<div class="row align-spaced">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the space around</div>
</div>
對齊至
左側
對齊至
右側
對齊至
中間
對齊至
邊緣
對齊至
周圍空間

您可能會想知道 .align-justify 和 .align-spaced 之間的差異。已對齊格線（justify-content: space-between）平均分配每個欄之間的空間。第一個和最後一個欄固定在格線邊緣。

已間隔格線（justify-content: space-around）平均分配每個欄周圍的空間。這表示第一個欄的左側和最後一個欄的右側將永遠有空間。

水平對齊類別是 justify-content CSS 屬性的簡寫。 深入了解 justify-content。

垂直對齊

預設情況下，彈性格線中所有欄位都會延伸為等高。此行為可以使用另一組對齊類別來變更。沒錯，CSS 中的置中對齊！

垂直對齊的選項有 top、middle、bottom 和 stretch。請注意，我們使用 middle 一詞表示垂直對齊，而 center 則表示水平對齊。

對彈性列套用垂直對齊類別會影響其內部的每個欄位。

在影片中觀看此部分

edit on codepen button 
<div class="row align-middle">
  <div class="columns">I'm in the middle!</div>
  <div class="columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
</div>
我在中間！
我也在中間，但我有很多文字，所以佔據更多空間！Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
<div class="row align-top">
  <div class="columns">These columns align to the top.</div>
  <div class="columns">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-*。

在影片中觀看此部分

在 Foundation 6.2 中，我們引入了 .align-self-* 類別，取代了在欄位上使用 .align-* 類別的舊方法。舊類別已在 Foundation 6.3 中完全移除。

edit on codepen button 
<div class="row">
  <div class="column align-self-bottom">Align bottom</div>
  <div class="column align-self-middle">Align middle</div>
  <div class="column align-self-top">Align top</div>
  <div class="column">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?

摺疊/展開列

.collapse 類別可讓您移除欄位間隙（內距）。

有時，您可能不希望每個媒體查詢都處於摺疊或展開狀態。這種情況下，請使用您想要的媒體查詢大小並摺疊或展開，然後將其新增到您的列元素。範例顯示小型和中型的間距，以及大型及以上沒有間距。

.is-collapse-child 類別會從摺疊父項下的巢狀列中移除負邊距。

edit on codepen button 
<div class="row small-collapse medium-uncollapse">
  <div class="columns small-6">
    Removes gutter at small media query and adds at medium.
  </div>
  <div class="columns small-6">
    Removes gutter at small media query and adds at medium.
  </div>
</div>

將瀏覽器縮小到中型大小，即可看到差異。

在小螢幕上，我有間距！

在中型螢幕上，我有間距！

在大型螢幕上，我沒有間距！

在小螢幕上，我有間距！

在中型螢幕上，我有間距！

在大型螢幕上，我沒有間距！

偏移

偏移與浮動格線的工作方式相同，透過將 margin-left 套用至欄位。

edit on codepen button 
<div class="row">
  <div class="columns small-4 large-offset-2">Offset 2 on large</div>
  <div class="columns small-4">4 columns</div>
</div>
大型螢幕上偏移 2
4 欄

區塊格線

若要定義列寬於列層級，而非個別欄位層級，請將類別 .[size]-up-[n] 新增至列，其中 [n] 是每列要顯示的欄位數，而 [size] 是套用效果的中斷點。

在影片中觀看此部分

區塊格線列預設具有 align-items: stretch 屬性，表示每列中的欄位高度相等。若要變更此設定，請變更列的 align-items 屬性，或使用其中一個 垂直對齊彈性盒類別。

edit on codepen button 
<div class="row small-up-1 medium-up-2 large-up-3">
  <div class="column">1 per row on small</div>
  <div class="column">2 per row on medium</div>
  <div class="column">3 per row on large</div>
</div>
小型螢幕上每列 1 個
中型螢幕上每列 2 個
大型螢幕上每列 3 個

Sass 參考

混合

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

flex-grid-row

@include flex-grid-row($behavior, $size, $columns, $base, $wrap, $gutters) { }

為彈性格線列建立一個容器。

參數類型預設值說明
$behavior 關鍵字或清單 null

對預設格線樣式的修改。nest 表示列將置於另一個列內。collapse 表示此列內的欄位不會有內距。nest collapse 結合了這兩種行為。
$size 關鍵字或數字 $grid-row-width

列的最大大小。設為 expand 以讓列佔滿整個寬度。
$columns 數字 null

此列要使用的欄位數。如果設為 null (預設值)，將使用全域欄位數。
$base 布林值 true

設為 false 可防止輸出基本樣式。如果您在同一個元素上呼叫此混合兩次，這很有用，因為它可以防止重複的 CSS 輸出。
$wrap 布林值 true

設為 false 可將列換行行為設為 nowrap
$gutters 數字或地圖 $grid-column-gutter

如果列是巢狀的，則反轉邊距時要使用的間距地圖或單一值。預設為回應式間距設定。

flex-grid-column

@include flex-grid-column($columns, $gutters);

為彈性格線建立一個欄位。預設情況下，欄位會延伸到其容器的整個寬度，但這可以使用尺寸類別或在父彈性列上使用 unstack 類別來覆寫。

參數類型預設值說明
$columns 混合 展開

欄位的寬度。請參閱 flex-grid-column() 函數以查看可能的值。
$gutters 數字或地圖 $grid-column-gutter

間距寬度的映射或單一值。請參閱 grid-column-gutter 混合。

flex-grid-layout

@include flex-grid-layout($n, $selector);

為彈性格線列建立一個區塊格線。

參數類型預設值說明
$n 數字 無

每列要顯示的欄位數。
$selector 字串 無

用於設定列中欄位目標的選擇器。

flex-grid-size

@include flex-grid-size($columns);

變更彈性格線欄位的寬度。

參數類型預設值說明
$columns 混合 展開

欄位的寬度。請參閱 flex-grid-column() 函數以查看可能的值。

函數

flex-grid-column

flex-grid-column($columns)

計算彈性格線欄位的 flex 屬性。它接受與基本 grid-column() 函數相同的所有值，以及兩個額外的值

  • expand（預設值）將使欄位擴展以填滿空間。
  • shrink 將使欄位收縮，因此它只佔用所需的水平空間。
參數類型預設值說明
$columns 混合 展開

欄位的寬度。