以下是一些使用 Flexbox 的常用模式。更多資訊請參閱 Tobias Ahlin 部落格。
彈性行/列斷行
您可以定義一個 CSS 類別，將其應用於元素上，以強制在彈性佈局中建立行/列斷行。
.flex-break
flex: 1 0 100% !important
.row
.flex-break
height: 0 !important
.column
.flex-break
width: 0 !importantcontent_paste
定義彈性容器時，請注意不要使用 no-wrap，並在需要的地方插入帶有 flex-break 類別的 div。
提示
您可以在斷行元素上使用 q-py-##，或在斷列元素上使用 q-px-## 來增加空間。
<div class="row">
<div>Col 1 / Row 1</div>
<div>Col 2 / Row 1</div>
<div class="flex-break"></div>
<div>Col 1 / Row 2</div>
<div class="flex-break q-py-md"></div>
<div>Col 1 / Row 3</div>
<div>Col 2 / Row 3</div>
<div>Col 3 / Row 3</div>
</div>content_paste
警告
當使用 column 類型彈性佈局時，您必須為容器定義高度。高度必須足夠容納最長的列。
磚牆式佈局
當使用具有多列的 column 類型彈性佈局時，元素的視覺順序將為垂直列。有時您希望順序遵循佈局中的行，為了實現這一點，您可以使用自訂順序 CSS 樣式和列斷行元素的組合。
警告
您必須知道佈局要使用多少列。此外，為了獲得最佳視覺效果，佈局中的元素高度應該彼此接近。
用於 $x 列數的通用 CSS 公式為
$x: 3;
@for $i from 1 through ($x - 1) {
.item:nth-child(#{$x}n + #{$i}) {
order: #{$i};
}
}
.item:nth-child(#{$x}n) {
order: #{$x};
}content_paste
範例，假設您想要 4 列佈局
.item:nth-child(4n+1)
order: 1
.item:nth-child(4n+2)
order: 2
.item:nth-child(4n+3)
order: 3
.item:nth-child(4n)
order: 4content_paste
對於 HTML，應遵循一些要求
- 彈性列容器必須定義高度
- 列斷行元素必須放置在開頭
- 列斷行元素的數量必須與列數相同
- 第一個列斷行元素必須隱藏（類別
hidden或樣式display: none）
範例，假設您想要 4 列佈局
<div class="column">
<div class="flex-break hidden"></div>
<div class="flex-break"></div>
<div class="flex-break"></div>
<div class="flex-break"></div>
<div>Cell 1</div>
<div>Cell 2</div>
...
<div>Cell last</div>
</div>content_paste
使用偽選擇器進行磚牆式行/列斷行
當不容易或不可能插入用於行/列斷行的元素，並且您需要 2 或 3 行/列時，可以使用偽選擇器。
.container-class
&--2-rows
:before
flex: 1 0 100% !important
height: 0 !important
order: 1
&--2-columns
:before
flex: 1 0 100% !important
width: 0 !important
order: 1
&--3-rows
:before,
:after
flex: 1 0 100% !important
height: 0 !important
order: 2
&--3-columns
:before,
:after
flex: 1 0 100% !important
width: 0 !important
order: 2content_paste