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

¥Here are some common patterns for using Flexbox. Some more info can be found at Tobias Ahlin Blog.

Flex 行/列分隔符(Flex row / column break)

¥Flex row / column break

你可以定义一个 CSS 类，强制其所应用的元素在弹性布局中创建行/列分隔符。

¥You can define a CSS class that would force the element it is applied on to create a row / column break in a flex layout.

.flex-break
  flex: 1 0 100% !important
.row
  .flex-break
    height: 0 !important
.column
  .flex-break
    width: 0 !important

注意，定义弹性容器时不要使用 no-wrap，并在需要的地方插入带有 flex-break 类的 div。

¥Take care not to use no-wrap when defining the flex container, and insert a div with class flex-break where you need.

<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>

类似 Masonry 的布局(Masonry-like layout)

¥Masonry-like layout

使用具有多列的 column 类型的 flex 时，元素的视觉顺序将为垂直列。有时你希望顺序遵循布局中的行，为了实现这一点，你可以使用组合或自定义顺序的 CSS 样式和分栏元素。

¥When using a column type flex with multiple columns the visual order of the elements will be in vertical columns. Sometimes you want the order to follow the rows in the layout, and in order to achieve this you can use a combination or custom order CSS styles and column break elements.

$x 列数的通用 CSS 公式为：

¥The general CSS formula for $x number of columns is:

$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 列布局：

¥Example, supposing you want a 4 column layout:

.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，需要遵循一些要求：

¥For the HTML there are some requirements that should be followed:

• 弹性列容器必须定义高度

  ¥the flex column container must have a height defined

• 分列元素必须位于起始位置

  ¥the column breaking elements must be placed at the start

• 分列元素的数量必须与列数相同

  ¥the column breaking elements must be as many as the columns

• 第一个分列元素必须隐藏（类 hidden 或样式 display: none）

  ¥the first column breaking element must be hidden (class hidden or style display: none)

例如，假设你需要 4 列布局：

¥Example, supposing you want a 4 column layout:

<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>

使用伪选择器拆分行/列的 Masonry(Masonry with pseudo selectors to break rows / columns)

¥Masonry with pseudo selectors to break rows / columns

当插入行/列分隔元素不容易或无法实现，并且你需要 2 或 3 行/列时，你可以使用伪选择器。

¥When it’s not easy or not possible to insert the elements for row / column break and you need 2 or 3 rows / column you can use pseudo selectors.

.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