Quasar提供了许多CSS类，以辅助您在Flexbox的帮助下轻松构建您的用户界面。 把它想象为使用许多选项的行和列操作。

Flexbox（Quasar Flex CSS类所基于的基础）模块旨在提供一种更有效的方式来布置、对齐和分配容器中各个项目之间的空间，即使它们的大小未知和/或动态（“flex”一词也是如此）“）。

关键概念

Quasar Flex CSS类适用于容器（Container, 父元素）或容器项（item, 子元素）。

管理父元素

设置方向

以下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容器的线，类似于水平对齐主轴内的单个元素的方式。

管理子元素

大小分布

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>

在上面的例子中，由于8/12 = 2/3 = 66％，col-8占据了行宽的三分之二（2/3），而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>
  <!--
     我们有3个子列，
     所以以上示例相当于
     对每个子列使用`col-4`
  -->
</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, 所以下一个元素放在同一行上 -->
  <div class="col-6">...</div>

  <!-- 2 + 6 + 10 > 12, 所以下一个元素换行到下一行 -->
  <div class="col-10">...</div>

  <!--
    10 + 3 > 12, 所以下一个元素换行到下一行。
     请注意，我们只考虑当前行
     （只有col-10，因为它被包裹到自己的行）。
  -->
  <div class="col-3">...</div>
</div>

请注意，行默认是可包裹的。 如果你想禁用这个，使用no-wrap CSS辅助类。

自对齐

子元素可以覆盖父元素上指定的对齐方式。 这允许对单个Flex项进行对齐。 请参阅“管理父元素”中的“对齐”说明以了解可用值(self-start, self-center, self-baseline, self-end, self-stretch)。

顺序

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

默认情况下，Flex项按源(source)顺序排列。 但是，order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度，请使用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>

以下是CSSorder属性的工作原理：

响应式设计

Quasar Flex CSS辅助类可以根据屏幕宽度进行应用，以帮助您制作响应式用户界面。 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">
  <!--
     加一起超过12个网格点，
     所以第二个<div>将包裹到下一行
  -->
  <div class="col-8">col</div>
  <div class="col-8">col</div>
</div>

另外查阅可见性风格页面查看窗口宽度和这些标记（xs、sm、md、lg、xl）的阈值以隐藏或显示DOM元素。

Flex插件(Addons)

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

.flex-<bp>-(block|inline)
.(row|column|flex)-<bp>(|-inline)
.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)

还有间距的响应类，包括填充(padding)和边距(margin)：

.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

Flex演示(Playground)

要查看Flex的实际效果，您可以使用Flex演示(Playground)进行交互了解更多信息。