Flexbox模式

下面是一些使用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

TIP

您可以在换行元素上使用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>



WARNING

使用column类型的flex时,必须定义容器的高度。高度必须足以容纳最长的列。




瀑布流布局

当对多个列使用column类型的flex时,元素的视觉顺序将是垂直列。有时,您希望顺序跟随布局中的行,为了实现这一点,您可以使用组合或自定义顺序的CSS样式和分栏元素。

WARNING

您必须知道要为布局使用多少列。同样,为了获得最佳视觉效果,布局中的元素应该高度接近其他元素。

$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