假設您先前已閱讀過 Flexbox 簡介 理論，讓我們更深入探討 Rows（列）。

針對等寬的欄位，請使用特定斷點的欄位類別。為您需要的每個斷點新增任意數量的無單位類別，則每個欄位都將具有相同的寬度。

等寬

例如，以下是兩個網格佈局，適用於從 xs 到 xl 的每個裝置和視窗。

設定單個欄位寬度

Flexbox 網格欄位的自動佈局也意味著您可以設定一個欄位的寬度，而其他欄位將自動調整大小以環繞它。您可以使用預定義的網格類別（如下所示）或內聯寬度。請注意，無論中心欄位的寬度如何，其他欄位都會調整大小。

可變寬度內容

使用 col-{breakpoint}-auto 類別，欄位可以根據其內容的自然寬度調整自身大小。這對於單行內容（如輸入框、數字等）非常方便（請參閱本頁上的最後一個範例）。這與水平對齊類別結合使用，對於在視窗寬度變化時置中具有不均勻欄位大小的佈局非常有用。

響應式類別

網格包含五個層級的預定義類別，用於構建複雜的響應式佈局。您可以根據需要自訂在超小型、小型、中型、大型或超大型裝置上的欄位大小。

所有斷點

對於從小到大裝置都相同的網格，請使用 .col 和 .col-* 類別。當您需要特定大小的欄位時，請指定編號的類別；否則，請隨意使用 .col。

堆疊到水平

結合使用 .col-12 和 .col-md-* 類別，您可以建立一個基本的網格系統，該系統在小型裝置上開始堆疊，然後在桌上型電腦（中型）裝置上變成水平。

混合搭配

不希望您的欄位僅在某些網格層級中堆疊？請根據需要為每個層級結合使用不同的類別。請參閱下面的範例，以更好地了解其運作方式。

對齊

使用 flexbox 對齊工具來垂直和水平對齊欄位。

欄位換行

如果在單行中放置超過 12 個欄位，則每組額外欄位將作為一個單位換行到新行。

重新排序

偏移欄位

使用 .offset-md-* 類別將欄位向右移動。這些類別將欄位的左邊距增加 * 個欄位。例如，.offset-md-4 將 .col-md-4 移動超過四個欄位。

巢狀結構

若要使用預設網格巢狀化您的內容，請在現有的 .col-sm-* 欄位中新增一個新的 .row 和一組 .col-sm-* 欄位。巢狀列應包含一組總計為 12 個或更少的欄位（不要求您使用所有 12 個可用欄位）。

Flex 實驗場

若要查看 Flex 的實際運作，您可以使用 Flex 實驗場以互動方式了解更多資訊。