下面是一些使用Flexbox的常见模式。更多信息请访问Tobias Ahlin博客。

Flex换行/分栏（row / column break）

您可以定义一个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。

<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时，元素的视觉顺序将是垂直列。有时，您希望顺序跟随布局中的行，为了实现这一点，您可以使用组合或自定义顺序的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