以下是使用Flexbox的一些常见模式。更多信息可以在Tobias Ahlin 博客找到。
Flex 行/列换行
您可以定义一个 CSS 类,使其应用到的元素在 Flex 布局中创建行/列换行。
.flex-break
flex: 1 0 100% !important
.row
.flex-break
height: 0 !important
.column
.flex-break
width: 0 !important
content_paste
注意,在定义 Flex 容器时不要使用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
类型的 Flex 时,必须为容器定义高度。高度必须足够大以容纳最长的列。
类似砌体布局
当使用具有多列的column
类型的 Flex 时,元素的视觉顺序将按垂直列排列。有时您希望顺序遵循布局中的行,为了实现这一点,您可以结合使用自定义顺序 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: 4
content_paste
对于 HTML,需要遵循一些要求
- Flex 列容器必须定义高度
- 列换行元素必须放置在开头
- 列换行元素的数量必须与列数相同
- 第一个列换行元素必须隐藏(
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: 2
content_paste