Flexbox 模式
對於支援最新技術的瀏覽器，Foundation 的一些主要元件可以轉換為彈性盒狀。
彈性盒狀模式
Foundation 元件使用浮動、垂直對齊、表格儲存格和各種其他 CSS 技巧來讓版面看起來正確。不過現在有更好的方法...如果您滿意以下瀏覽器支援！
啟用彈性盒狀模式會用彈性盒狀屬性取代這些技巧，簡化版面製作方式，並讓元素的調整大小和對齊變得更簡單。
彈性盒狀模式僅支援以下瀏覽器
- 最新的 Chrome 和 Firefox
- Safari 6+
- IE/Edge 10+
- iOS 7+
- Android 4.4+
啟用彈性盒狀模式
使用 Foundation 的 Sass 版本，您可以透過兩種方式啟用彈性盒狀模式
如果您在主 Sass 檔案中使用 foundation-everything() 混合，請傳入參數 true 以啟用彈性盒狀模式。
@include foundation-everything(true);如果您手動包含每個元件（如同我們的入門專案），請開啟設定檔（基本範本：scss/_settings.scss，ZURB 範本：src/assets/scss/_settings.scss），將 $global-flexbox 設為 true，並移除浮動格線的 @include，將其替換為彈性格線的 @include，以及輔助類別（基本範本：scss/app.scss，ZURB 範本：src/assets/scss/app.scss）
$global-flexbox: true;
// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;支援的元件
除了彈性格線之外，這些元件具有彈性盒狀模式
一般來說，所有元件的工作方式完全相同。但是，其中一些元件需要對 CSS 類別進行些微變更才能正常運作。請參閱各元件的文件，以找出差異之處。
Sass 參考
變數
此元件的預設樣式可以使用專案中的這些 Sass 變數在 設定檔 中自訂。
| 名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$flex-source-ordering-count |
數字 | 6 |
來源排序計數的預設值 |
$flexbox-responsive-breakpoints |
布林值 | true |
快速停用/啟用原生彈性輔助工具的回應式中斷點。 |
混合
我們使用這些混合來建置此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件建置您自己的類別結構。
flex
@include flex;透過將 display: flex 新增到元素來啟用彈性盒狀。
flex-align
@include flex-align($x, $y);水平或垂直對齊彈性容器內的項目。
| 參數 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$x |
關鍵字 | null |
要使用的水平對齊。可以是 |
$y |
關鍵字 | null |
要使用的垂直對齊。可以是 |
flex-align-self
@include flex-align-self($y);在彈性列中垂直對齊單一欄。將此混合套用到彈性欄。
| 參數 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$y |
關鍵字 | null |
要使用的垂直對齊。可以是 |
flex-order
@include flex-order($order);變更彈性子項的來源順序。數字較小的子項會先在版面中顯示。
| 參數 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$order |
數字 | 0 |
要套用的順序號碼。 |
flex-direction
@include flex-direction($direction);變更 flex-direction
| 參數 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$direction |
關鍵字 | row |
要使用的彈性方向。可以是
|