Quasar 提供了大量的 CSS 類別，藉由 Flexbox 協助您輕鬆建構 UI。可以將其想像成操作具有多種選項的行和列。

Flexbox（Quasar Flex CSS 類別以此為基礎）模組旨在提供更有效率的方式來佈局、對齊和分配容器中項目之間的空間，即使它們的大小是未知和/或動態的（因此稱為「flex」）。

關鍵概念

Quasar Flex CSS 類別適用於容器（父元素）或容器的項目（子元素）。

管理父元素

設定方向

以下 CSS 類別之一對於父元素是必要的，以便子元素上的類別（在下一節中描述）產生任何效果。

範例

<div class="row">
  <div>First column</div>
  <div>Second column</div>
  <div>Third column</div>
</div>

預設為自動換行

預設情況下，所有行和列都會自動換行其內容。

然而，如果您明確地不想要換行，並因此希望將所有內容放入一行，請新增 no-wrap CSS 輔助類別。

此外，如果您想要以反向順序換行，則可以使用 reverse-wrap。

對齊

對於沿主軸的對齊，請使用以下類別。當一行上的所有彈性項目皆為非彈性，或為彈性但已達到其最大尺寸時，這有助於分配剩餘的可用空間。當項目溢出行時，它還可以對項目的對齊方式施加一些控制。

對於垂直於主軸的對齊，請使用以下類別。這定義了彈性項目在目前行上的橫軸上如何佈局的預設行為。可以將其視為橫軸（垂直於主軸）的 horizontal-* 版本。

接下來的類別會在彈性容器的軸線方向有多餘空間時，對齊容器的行，類似於 horizontal-* 如何在主軸方向對齊個別項目。

管理子元素

尺寸分配

Quasar 使用 12 欄系統來分配 row 子元素的尺寸。以下是一些可用的 CSS 輔助類別範例

<div class="row">
  <div class="col-8">two thirds</div>
  <div class="col-2">one sixth</div>
  <div class="col-auto">auto size based on content and available space</div>
  <div class="col">fills remaining available space</div>
</div>

在上面的範例中，col-8 佔據了 row 寬度的三分之二 (2/3)，因為 8/12 = 2/3 = 66%，而 col-2 佔據了六分之一 (2/12 = 1/6 ~ 16.67%)。

CSS 輔助類別 col-auto 使儲存格僅填充渲染所需的空間。col 另一方面，會嘗試填充所有可用空間，並在需要時縮小。

CSS 輔助類別 col-grow 使儲存格至少填充渲染所需的空間，並在有更多空間可用時可以擴展。

CSS 輔助類別 col-shrink 使儲存格最多填充渲染所需的空間，並在空間不足時可以縮小。

另一個範例，下方附有視覺化呈現

<div class="row">
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <!--
     we have 3 children, so equivalent
     to above would be to use `col-4`
     on each of the children
  -->
</div>

<div class="row">
  <div class="col-3">1</div>
  <div class="col-6">2</div>
  <div class="col-3">1</div>
</div>

也可以偏移儲存格。例如：offset-4 偏移三分之一的空間 (4/12 = 1/3 = 33%)。

換行

換行是理解 Flex CSS 類別的關鍵功能。您不必每行都精確使用 12 點。您可以使用更少甚至更多。

這讓您可以（除其他外）在較小的螢幕上動態垂直堆疊行，同時在較大的螢幕上將它們顯示在單行上。請閱讀「響應式設計」章節。

<div class="row">
  <div class="col-2">...</div>

  <!-- 2 + 6 < 12, so next element is placed on same line -->
  <div class="col-6">...</div>

  <!-- 2 + 6 + 10 > 12, so next element wraps to next line -->
  <div class="col-10">...</div>

  <!--
    10 + 3 > 12, so next element wraps to next line.
    Note that we take into consideration the current line only
    (with col-10 only, since it was wrapped to its own line).
  -->
  <div class="col-3">...</div>
</div>

請注意，預設情況下，行是可換行的。如果您希望禁用此功能，請使用 no-wrap CSS 輔助類別。

自身對齊

項目可以覆蓋在父元素上指定的對齊方式。這允許為個別彈性項目覆蓋對齊方式。請參閱「管理父元素」中的「對齊」說明，以了解可用的值 (self-start、self-center、self-baseline、self-end、self-stretch)。

順序

您可以使用 order-first 和 order-last CSS 輔助類別來設定子元素的順序。

預設情況下，彈性項目按照原始碼順序排列。但是，order 屬性控制它們在彈性容器中出現的順序。如果您需要更精細的控制，請使用 order CSS 屬性並指定所需的值。

範例

<div class="row">
  <div style="order: 2">Second column</div>
  <div class="order-last">Third column</div>
  <div class="order-first">First column</div>
</div>

以下說明 CSS order 屬性的運作方式

響應式設計

Quasar Flex CSS 類別可以根據螢幕寬度應用，以幫助您製作響應式 UI。12 欄網格系統的靈感來自 Bootstrap，因此有很多相似之處。

斷點規範符號採用移動優先方法，其中較大的斷點定義將覆蓋較小的斷點定義。

到目前為止，我們了解到，例如，我們可以調整欄的大小，而無需考慮視窗寬度。如果我們要創建響應式 UI，我們需要在考慮視窗寬度的同時動態更改尺寸。首先，讓我們了解一些可以注入到 col-*、offset-* 和 col-auto 輔助類別中間的標記 (請參閱下表中的標記)。

範例：col-md-7、offset-lg-3、col-xs-auto。

完整範例：假設我們有一個包含三個子元素的 row。在超小型視窗中，我們需要垂直堆疊子元素。在小型視窗中，我們需要並排顯示它們 (每個都具有相等的寬度)，並且從中型視窗開始，我們應該將它們全部顯示在同一行上

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    col
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    col
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    col
  </div>
</div>

請注意，在上面的範例中，我們使用了 col-xs-12 (12/12 = row 的 100%，因此每個子元素都將佔用容器的全部寬度，使所有子元素垂直堆疊，因為 row 預設會換行內容)、col-sm-6 (6/12 = row 的 50%) 和 col-md-4 (4/12 = row 的 33%)。

如前所述，row 預設會換行內容，因此當一個 row 使用 12 個 (或更多) 網格點時，內容會換行到下一行。如果我們有兩個 <div> 並且我們在兩者上都使用 col-8，它們也會堆疊，因為 8 + 8 = 16，而我們只能在單行上顯示 12 點。

<div class="row">
  <!--
    more than 12 grid points together,
    so second <div> will wrap on next line
  -->
  <div class="col-8">col</div>
  <div class="col-8">col</div>
</div>

另請查看可見性樣式頁面，以查看視窗寬度的閾值以及這些單獨使用的標記 (xs、sm、md、lg、xl)，以隱藏或顯示 DOM 元素。

Flex 附加元件

啟用後 (透過 quasar.config file > framework > cssAddon: true)，它為所有 flex (和 display) 相關的 CSS 類別提供斷點感知版本。

.flex-<bp>-(block|inline)
.(row|column|flex)-<bp>(|-inline-<bp>)
.reverse-<bp>
.(wrap|no-wrap|reverse-wrap)-<bp>
.order-<bp>-(first|last|none)
.justify-<bp>-(start|end|center|between|around|evenly)
.items-<bp>-(start|end|center|baseline|stretch)
.content-<bp>-(start|end|center|between|around)
.self-<bp>-(start|end|center|baseline|stretch)
.flex-<bp>-center
.q-gutter-<bp>(|-x|-y)-(xs|sm|md|lg|xl)
.(col|offset)-<bp>-(|0..12)

間距也有響應式類別，適用於 padding 和 margin

.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)

範例：row-md、items-lg-end、q-pa-xs q-pa-sm-sm q-px-md-lg q-py-md-md

Flex Playground

要查看 Flex 的實際效果，您可以使用 Flex Playground 互動式地了解更多資訊。