为什么要捐赠
API 资源管理器
Flexbox 布局模式

以下是使用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

注意,在定义 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>
行换行



警告

当使用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};
}

例如,假设您想要一个 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

对于 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>
砌体



使用伪选择器来换行/换列的砌体

当难以或无法插入行/列换行元素,并且您需要 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
类似表格网格的砌体