基礎6：新的Flex網格

基礎6的Flex網格：一個功能強大的，基於Flexbox的佈局系統

基礎6引入了改變遊戲規則的Flex網格，利用Flexbox的力量來創建響應迅速且複雜的Web設計。 但是，該高級系統需要瀏覽器兼容性考慮。它與IE8和IE9等傳統瀏覽器不兼容。

關鍵特徵和注意事項：>

>可選組件：
• 默認情況下未啟用flex網格。 它被設計為替代標準網格的替代品，並且由於重疊的類名稱（，）。 .row.column增強控制：可以輕鬆管理元素順序，水平和垂直對齊以及其他佈局方面。 創建多個網格，每個網格都具有唯一的佈局，用於顆粒狀控制。
>
• 瀏覽器支持：其對Flexbox的依賴僅意味著與現代瀏覽器的兼容性。 傳統瀏覽器支持需要堅持使用標準網格。
• 實現flex網格：

>

對於SASS用戶，修改：

對於自定義構建，請在自定義過程中選擇Flex網格。 > app.scss

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

基本用法：

一個簡單的3列佈局：

元素排序：

<div class="row">
  <div class="column small-12 medium-6 large-4">Column 1</div>
  <div class="column small-12 medium-6 large-4">Column 2</div>
  <div class="column small-12 medium-6 large-4">Column 3</div>
</div>

flexbox簡化了元素的重新排序。 使用

或進行特定於設備的排序：

>特定於設備的排序：order-{value} {size}-order-{value}

<div class="row">
  <div class="column order-2">Second</div>
  <div class="column order-1">First</div>
</div>

<div class="row">
  <div class="column small-order-1 medium-order-2">Small: First, Medium: Second</div>
  <div class="column small-order-2 medium-order-1">Small: Second, Medium: First</div>
</div>

對齊：

>使用

，等的類輕鬆地將內容放在水平和垂直上，該類應用於>或單個

元素。 例如，均勻間隔的菜單項：

align-center align-middle.row修訂後的SASS網格系統：.column>

基礎6增強其核心網格混合蛋白，允許具有不同列計數的多個網格定義。 這啟用了高度自定義的佈局：

<div class="row align-spaced">
  <div class="column small-3">Home</div>
  <div class="column small-3">About</div>
  <div class="column small-3">Contact</div>
</div>

結論：

與其前身相比，

基礎6的Flex網格提供了優越的靈活性和對佈局的控制。 如果傳統瀏覽器支持不是約束，則是精簡開發和適應性設計的建議方法。 增強的Sass Grid Mixin進一步使開發人員具有高度定制的網格系統。

以上是基礎6：新的Flex網格的詳細內容。更多資訊請關注PHP中文網其他相關文章！