希望您先前已閱讀過 Flexbox 簡介 理論的簡介，讓我們更深入探討間距 (Gutters)。
Gutter Quasar CSS 類別提供了一種簡單的方式來等距地隔開元素 (尤其是在 Grid Row 中)。
類型
根據您的使用情境，間距 (gutters) 主要有兩種類型：q-gutter-{size} 和 q-col-gutter-{size}。第一種用於當您想要隔開的元素未使用指定寬度的 col-* 或 offset-* 類別時，而後者用於當它們確實有指定寬度的 col-* 或 offset-* 類別時。
提示
後綴詞 (-none、-xs、-sm、-md、-lg、-xl) 並非指裝置螢幕尺寸，而是指元素之間間距 (gutter) 的大小。
“q-gutter-{size}” 類別
警告
q-gutter-* 類別將負上邊距和左邊距應用於父元素，並將正上邊距和左邊距應用於子元素。在使用其他間距 (Spacing) 類別時，請將此納入考量，以免破壞間距 (gutter) 的 CSS。
當直接子元素沒有指定寬度的 col-* 或 offset-* 類別時，應使用這些類別。
還有 q-gutter-none 類別 (等同於：不應用間距 (gutter))，以上範例中未包含此類別。
“q-col-gutter-{size}” 類別
警告
q-col-gutter-* 類別將負上邊距和左邊距應用於父元素，並將正上內邊距和左內邊距應用於子元素。在使用其他間距 (Spacing) 類別時，請將此納入考量，以免破壞間距 (gutter) 的 CSS。
當直接子元素有指定寬度的 col-* 或 offset-* 類別時，應使用這些類別。
優點、缺點以及如何解決問題 - “q-gutter-{size}” vs. “q-col-gutter-{size}”
這兩組類別都有優點和缺點。
警告
因為 q-gutter-* 和 q-col-gutter-* 類別都會將負上邊距和左邊距應用於父元素，所以您不應在父元素上應用以背景、邊距或邊框相關屬性為目標的樣式。
相反地，您需要將它們包裝在容器中，在容器上應用樣式，並在容器上新增 overflow-auto 或 row 類別
提示
q-gutter-* 類別不會改變子元素的內部尺寸，因此您可以直接在子元素上使用 background 或 border。
警告
q-col-gutter-* 類別確實會改變子元素 的外部尺寸，因此您無法再在子元素上使用指定寬度的 col-* 或 offset-* 類別。
警告
因為 q-col-gutter-* 類別會將負上內邊距和左內邊距應用於子元素，所以您不應在子元素上應用以背景、內邊距或邊框相關屬性為目標的樣式。相反地，您需要將樣式化元素放在子元素內部，並在該元素上應用樣式。
Flex Grid Playground
若要查看 Flex 的實際運作，您可以使用 Flex Playground 互動式地學習更多。
Flex Playgroundlaunch