Flexbox 技巧

Flex 网格
Flexbox 介绍
Flex 网格
Grid Row 行
Flex 网格
Grid Column 列
Flex 网格
Grid Gutter 间隔
Flex 网格
Flex 在线体验

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

分栏

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

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

<template>
  <div class="q-pa-md">

    <div class="row items-start example-container">
      <div class="example-cell" tabindex="0">Col 1 / Row 1</div>
      <div class="example-cell col-6" tabindex="0">Col 2 / Row 1 - 1<br>Col 2 / Row 1 - 2</div>
      <div class="flex-break"></div>
      <div class="example-cell" tabindex="0">Col 1 / Row 2</div>
      <div class="flex-break q-py-md"></div>
      <div class="example-cell col-4" tabindex="0">Col 1 / Row 3</div>
      <div class="example-cell" tabindex="0">Col 2 / Row 3</div>
      <div class="example-cell" tabindex="0">Col 3 / Row 3</div>
    </div>

  </div>
</template>
Col 1 / Row 1
Col 2 / Row 1 - 1
Col 2 / Row 1 - 2
Col 1 / Row 2
Col 1 / Row 3
Col 2 / Row 3
Col 3 / Row 3

WARNING

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

<template>
  <div class="q-pa-md">

    <div class="column inline items-start example-container">
      <div class="example-cell" tabindex="0">Col 1 / Row 1</div>
      <div class="example-cell" tabindex="0">Col 2 / Row 1 - 1<br>Col 2 / Row 1 - 2</div>
      <div class="flex-break"></div>
      <div class="example-cell" tabindex="0">Col 1 / Row 2</div>
      <div class="flex-break q-px-md"></div>
      <div class="example-cell" tabindex="0">Col 1 / Row 3</div>
      <div class="example-cell" tabindex="0">Col 2 / Row 3</div>
      <div class="example-cell" tabindex="0">Col 3 / Row 3</div>
    </div>

  </div>
</template>
Col 1 / Row 1
Col 2 / Row 1 - 1
Col 2 / Row 1 - 2
Col 1 / Row 2
Col 1 / Row 3
Col 2 / Row 3
Col 3 / Row 3

瀑布流布局

当对多个列使用 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>

<template>
  <div class="q-pa-md">

    <q-btn class="q-mb-md" color="primary" label="重新生成布局" @click="onClick" />

    <div class="column example-container">
      <div class="flex-break hidden"></div>
      <div class="flex-break"></div>
      <div class="flex-break"></div>
      <div class="flex-break"></div>

      <div v-for="(cell, i) in cells" :key="i" class="example-cell" tabindex="0">
        <div>
          <div v-for="(text, j) in cell" :key="j">
            {{ text }}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
Cell 1 - 1
Cell 1 - 2
Cell 1 - 3
Cell 2 - 1
Cell 2 - 2
Cell 2 - 3
Cell 2 - 4
Cell 3 - 1
Cell 3 - 2
Cell 3 - 3
Cell 3 - 4
Cell 3 - 5
Cell 4 - 1
Cell 4 - 2
Cell 4 - 3
Cell 5 - 1
Cell 5 - 2
Cell 5 - 3
Cell 5 - 4
Cell 5 - 5
Cell 6 - 1
Cell 6 - 2
Cell 6 - 3
Cell 7 - 1
Cell 7 - 2
Cell 7 - 3
Cell 7 - 4
Cell 7 - 5
Cell 8 - 1
Cell 8 - 2
Cell 8 - 3
Cell 8 - 4
Cell 8 - 5
Cell 9 - 1
Cell 9 - 2
Cell 9 - 3
Cell 10 - 1
Cell 10 - 2
Cell 10 - 3
Cell 10 - 4
Cell 10 - 5
Cell 11 - 1
Cell 11 - 2
Cell 11 - 3
Cell 11 - 4
Cell 12 - 1
Cell 12 - 2
Cell 12 - 3
Cell 13 - 1
Cell 13 - 2
Cell 13 - 3
Cell 13 - 4
Cell 14 - 1
Cell 14 - 2
Cell 14 - 3
Cell 14 - 4
Cell 14 - 5
Cell 15 - 1
Cell 15 - 2
Cell 15 - 3
Cell 15 - 4
Cell 15 - 5
Cell 16 - 1
Cell 16 - 2
Cell 16 - 3
Cell 16 - 4
Cell 17 - 1
Cell 17 - 2
Cell 17 - 3
Cell 18 - 1
Cell 18 - 2
Cell 18 - 3
Cell 18 - 4
Cell 19 - 1
Cell 19 - 2
Cell 19 - 3
Cell 19 - 4
Cell 20 - 1
Cell 20 - 2
Cell 20 - 3
Cell 20 - 4
Cell 21 - 1
Cell 21 - 2
Cell 21 - 3
Cell 21 - 4
Cell 22 - 1
Cell 22 - 2
Cell 22 - 3
Cell 22 - 4
Cell 22 - 5
Cell 23 - 1
Cell 23 - 2
Cell 23 - 3
Cell 24 - 1
Cell 24 - 2
Cell 24 - 3
Cell 24 - 4
Cell 24 - 5

使用伪类选择器来分栏瀑布流

当不容易或不可能插入上述分栏元素，且需要分栏 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

<template>
  <div class="q-pa-md">
    <q-table
      grid
      :card-container-class="cardContainerClass"
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="name"
      :filter="filter"
      hide-header
      v-model:pagination="pagination"
      :rows-per-page-options="rowsPerPageOptions"
    >
      <template v-slot:top-right>
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>

      <template v-slot:item="props">
        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
          <q-card>
            <q-card-section class="text-center">
              Calories for
              <br>
              <strong>{{ props.row.name }}</strong>
            </q-card-section>
            <q-separator />
            <q-card-section class="flex flex-center" :style="{ fontSize: props.row.calories + 'px' }">
              <div>{{ props.row.calories }} g</div>
            </q-card-section>
          </q-card>
        </div>
      </template>
    </q-table>
  </div>
</template>
Treats
Calories for
Jelly bean (1)
36 g
Calories for
Eclair (5)
35 g
Calories for
Frozen Yogurt (1)
33 g
Calories for
Frozen Yogurt (2)
23 g
Calories for
Frozen Yogurt (5)
50 g
Calories for
Frozen Yogurt (0)
59 g
Calories for
Frozen Yogurt (19)
36 g
Calories for
Frozen Yogurt (21)
69 g
Calories for
Ice cream sandwich (9)
63 g
每页的行数:
1-9 / 240
查看更多？
Flex 网格
Grid Gutter 间隔
Flex 网格
Flex 在线体验
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。