Quasar 提供了大量的 CSS 类来帮助你使用 Flexbox 轻松构建你的 UI。可以把它想象成使用带有很多选项的行和列进行操作。

Flexbox（Quasar Flex CSS 类基于它）模块旨在提供一种更有效的方式来布局、对齐和分配容器中项目的间距，即使它们的大小未知和/或动态（因此称为“flex”）。

关键概念

Quasar Flex CSS 类应用于容器（父级）或容器的项目（子级）。

管理父级

设置方向

以下 CSS 类之一对于父级来说是必须的，以便子级（在下一节中描述）上的类有任何效果。

示例

<div class="row">
  <div>First column</div>
  <div>Second column</div>
  <div>Third column</div>
</div>

默认情况下自动换行

默认情况下，所有行和列都会自动换行其内容。

但是，如果你明确地不想自动换行，并且这样做的目的是将所有内容都放到一行中，那么添加 no-wrap CSS 辅助类。

此外，如果你想以相反的顺序自动换行，那么可以使用 reverse-wrap。

对齐

对于沿主轴的对齐，使用以下类。它有助于在所有 Flex 项目都在一行上且不可伸缩或可以伸缩但已达到其最大大小时分配剩余的空闲空间。它还在项目溢出该行时对项目的对齐施加一些控制。

对于垂直于主轴的对齐，使用以下类。这定义了 Flex 项目在当前行上沿交叉轴的布局的默认行为。可以把它想象成交叉轴（垂直于主轴）的 horizontal-* 版本。

以下类在交叉轴中有额外空间时对齐 Flex 容器的行，类似于 horizontal-* 如何对齐主轴内的单个项目。

管理子级

尺寸分配

Quasar 使用 12 点列系统来分配行子级的尺寸。以下是一些可用 CSS 辅助类的示例

<div class="row">
  <div class="col-8">two thirds</div>
  <div class="col-2">one sixth</div>
  <div class="col-auto">auto size based on content and available space</div>
  <div class="col">fills remaining available space</div>
</div>

在上面的示例中，col-8 填充了行宽度的三分之二（2/3），因为 8/12 = 2/3 = 66%，而 col-2 占据了六分之一（2/12 = 1/6 ~ 16.67%）。

CSS 辅助类 col-auto 使单元格仅填充渲染它所需的间距。col 另一方面，尝试填充所有可用空间，并在需要时收缩。

CSS 辅助类 col-grow 使单元格至少填充渲染它所需的间距，并在有更多空间可用时可以增长。

CSS 辅助类 col-shrink 使单元格最多填充渲染它所需的间距，并在空间不足时可以收缩。

另一个带视觉表示的示例在它下面

<div class="row">
  <div class="col">1</div>
  <div class="col">1</div>
  <div class="col">1</div>
  <!--
     we have 3 children, so equivalent
     to above would be to use `col-4`
     on each of the children
  -->
</div>

<div class="row">
  <div class="col-3">1</div>
  <div class="col-6">2</div>
  <div class="col-3">1</div>
</div>

也可以偏移单元格。例如：offset-4 偏移三分之一的空间 (4/12 = 1/3 = 33%)。

自动换行

自动换行是理解 Flex CSS 类的关键功能。你并不局限于每行使用 12 个点。你可以使用更少甚至更多。

这允许您（除其他事项外）在较小的屏幕上动态地垂直堆叠行，而在较大的屏幕上则将它们显示在单行上。阅读“响应式设计”部分。

<div class="row">
  <div class="col-2">...</div>

  <!-- 2 + 6 < 12, so next element is placed on same line -->
  <div class="col-6">...</div>

  <!-- 2 + 6 + 10 > 12, so next element wraps to next line -->
  <div class="col-10">...</div>

  <!--
    10 + 3 > 12, so next element wraps to next line.
    Note that we take into consideration the current line only
    (with col-10 only, since it was wrapped to its own line).
  -->
  <div class="col-3">...</div>
</div>

请注意，行默认情况下是可换行的。如果您希望禁用此功能，请使用 no-wrap CSS 辅助类。

自对齐

项目可以覆盖父级上指定的对齐方式。这允许对单个弹性项目进行对齐方式覆盖。请参阅“管理父级”中的“对齐方式”说明，以了解可用值（self-start、self-center、self-baseline、self-end、self-stretch）。

顺序

您可以使用 order-first 和 order-last CSS 辅助类来设置子元素的顺序。

默认情况下，弹性项目按源顺序排列。但是，order 属性控制它们在弹性容器中出现的顺序。如果您需要更细粒度的控制，请使用 order CSS 属性并分配所需的值。

示例

<div class="row">
  <div style="order: 2">Second column</div>
  <div class="order-last">Third column</div>
  <div class="order-first">First column</div>
</div>

以下是 CSS order 属性的工作原理

响应式设计

Quasar Flex CSS 类可以根据屏幕宽度应用，以帮助您创建响应式 UI。12 点网格借鉴了 Bootstrap 的设计，因此两者有很多相似之处。

断点说明符采用移动优先方法，其中较大的断点定义将覆盖较小的断点定义。

到目前为止，我们已经了解到，例如，我们可以调整列的大小，而不考虑窗口宽度。如果我们要创建响应式 UI，我们需要在考虑窗口宽度的同时动态地更改大小。首先，让我们了解一些可以在 col-*、offset-* 和 col-auto 辅助类中间插入的标记（查看下面的表格以了解标记）。

示例：col-md-7、offset-lg-3、col-xs-auto。

完整的示例：假设我们有一行，包含三个子元素。在超小型窗口中，我们需要垂直堆叠子元素。在小型窗口中，我们需要并排显示它们（每个元素具有相同的宽度）。从中等窗口开始，我们应该将它们全部显示在同一行上

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    col
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    col
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    col
  </div>
</div>

请注意，在上面的示例中，我们使用了 col-xs-12（12/12 = 100% 的行，因此每个子元素将占用容器的全部宽度，使所有子元素垂直堆叠，因为行默认情况下会换行内容）、col-sm-6（6/12 = 50% 的行）和 col-md-4（4/12 = 33% 的行）。

如前所述，行默认情况下会换行内容，因此当一行使用 12（或更多）个网格点时，内容会换行到下一行。如果我们有两个 <div>，并且我们在两者上都使用 col-8，它们也会堆叠，因为 8 + 8 = 16，而我们只能在一行上显示 12 个点。

<div class="row">
  <!--
    more than 12 grid points together,
    so second <div> will wrap on next line
  -->
  <div class="col-8">col</div>
  <div class="col-8">col</div>
</div>

还可以查看 可见性 样式页面，以查看窗口宽度阈值以及这些标记（xs、sm、md、lg、xl）在自身用于隐藏或显示 DOM 元素时的使用情况。

弹性附加组件

启用后（通过 quasar.config file > framework > cssAddon: true），它将为所有与弹性（和显示）相关的 CSS 类提供断点感知版本。

.flex-<bp>-(block|inline)
.(row|column|flex)-<bp>(|-inline-<bp>)
.reverse-<bp>
.(wrap|no-wrap|reverse-wrap)-<bp>
.order-<bp>-(first|last|none)
.justify-<bp>-(start|end|center|between|around|evenly)
.items-<bp>-(start|end|center|baseline|stretch)
.content-<bp>-(start|end|center|between|around)
.self-<bp>-(start|end|center|baseline|stretch)
.flex-<bp>-center
.q-gutter-<bp>(|-x|-y)-(xs|sm|md|lg|xl)
.(col|offset)-<bp>-(|0..12)

还有一些响应式类用于间距，包括填充和边距

.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)

示例：row-md、items-lg-end、q-pa-xs q-pa-sm-sm q-px-md-lg q-py-md-md

弹性游乐场

要查看弹性的实际应用，您可以使用弹性游乐场以交互方式了解更多信息。