Quasar 提供了大量 CSS 类，可帮助你借助 Flexbox 轻松构建 UI。可以将其视为操作行和列，并拥有许多选项。

¥Quasar provides lots of CSS classes to help you build your UI easily with the help of Flexbox. Think of it like operating with rows and columns with many options at hand.

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

¥Flexbox (upon which Quasar Flex CSS classes are based) module aims to provide a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

关键概念(Key concept)

¥Key concept

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

¥Quasar Flex CSS classes apply to either the Container (Parent) or the Container’s items (Children).

管理父级(Managing Parent)

¥Managing Parent

设置方向(Setting Direction)

¥Setting Direction

父级必须具备以下 CSS 类之一，子级的 CSS 类（将在下一节中介绍）才能生效。

¥One of the following CSS classes is mandatory for the parent in order for ones on the children (described in next sections) to have any effect.

示例：

¥Example:

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

默认换行(Wrapping by default)

¥Wrapping by default

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

¥By default, all rows and columns wrap their content.

但是，如果你明确不想换行，而是希望通过换行将所有内容放在一行中，则请添加 no-wrap CSS 辅助类。

¥However if you explicitly do not want to wrap and by so doing you want to fit all content into one line, then add no-wrap CSS helper class.

此外，如果你想以相反的顺序封装，则可以使用 reverse-wrap。

¥Also, if you want to wrap in reverse order, then reverse-wrap is available.

对齐(Alignment)

¥Alignment

要沿主轴对齐，请使用以下类。当一行上的所有弹性项目都不可伸缩，或者虽然可伸缩但已达到最大尺寸时，它有助于分配剩余的可用空间。它还对项目溢出时的对齐方式进行了一些控制。

¥For alignment along the main axis, use classes below. It helps distribute left over free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

要垂直于主轴对齐，请使用以下类。这定义了弹性项目在当前行沿横轴的默认布局行为。可以将其视为横轴（垂直于主轴）的水平*版本。

¥For alignment perpendicular to the main axis, use classes below. This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the horizontal-* version for the cross-axis (perpendicular to the main-axis).

接下来的类会在横轴有额外空间时对齐 flex 容器的线条，类似于水平* 在主轴内对齐单个项目的方式。

¥The next classes align a flex container’s lines within when there is extra space in the cross-axis, similar to how horizontal-* aligns individual items within the main-axis.

管理子进程(Managing Children)

¥Managing Children

大小分布(Distribution of Size)

¥Distribution of Size

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

¥Quasar uses a 12 point column system for distributing the size of row children. Here are some examples of the available CSS helper classes:

<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%)。

¥In the example above, col-8 fills two thirds (2/3) of the row width, because 8/12 = 2/3 = 66%, while col-2 occupies one sixth (2/12 = 1/6 ~ 16.67%).

CSS 辅助类 col-auto 使单元格仅填充其需要渲染的空间。另一方面，col 会尝试填满所有可用空间，同时根据需要缩小空间。

¥CSS helper class col-auto makes the cell fill only the space it needs to be rendered. col, on the other hand, tries to fill all space available while also shrinking if needed.

CSS 辅助类 col-grow 使单元格至少填充其需要渲染的空间，并有可能在有更多可用空间时进行扩展。

¥CSS helper class col-grow makes the cell fill at least the space it needs to be rendered, with the possibility to grow when more space is available.

CSS 辅助类 col-shrink 使单元格最多填充其需要渲染的空间，并在空间不足时缩小。

¥CSS helper class col-shrink makes the cell fill at most the space it needs to be rendered, with the possibility to shrink when not enough space is available.

另一个示例及其下方的可视化表示：

¥Another example with a visual representation below it:

<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%）。

¥It is also possible to offset a cell. For example: offset-4 offsets a third of space (4/12 = 1/3 = 33%).

换行(Wrapping)

¥Wrapping

换行是理解 Flex CSS 类的关键特性。你不必每行使用 12 个点。你可以使用更少或更多。

¥Wrapping is a key feature in understanding Flex CSS classes. You are not bound to use exactly 12 points per row. You can use less or even more.

除其他功能外，这允许你在较小的屏幕上动态地垂直堆叠行，而在较大的屏幕上将它们显示在一行上。阅读 “响应式设计” 部分。

¥This allows you, among other things, to dynamically stack rows vertically on smaller screens while displaying them on a single line on bigger screens. Read the “Responsive Design” section.

<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 辅助类。

¥Note that rows are wrappable by default. Should you wish to disable this, use the no-wrap CSS helper class.

自对齐(Self Alignment)

¥Self Alignment

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

¥An item can override the aligned specified on parent. This allows alignment to be overridden for individual flex items. Please see the “Alignment” explanation from “Managing Parent” to understand the available values (self-start, self-center, self-baseline, self-end, self-stretch).

顺序(Order)

¥Order

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

¥You can set the order of child elements by using order-first and order-last CSS helper classes.

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

¥By default, flex items are laid out in source order. However, the order property controls the order in which they appear in the flex container. If you need more granularity, use order CSS property and assign the desired value.

示例：

¥Example:

<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 属性的工作原理：

¥Here is how the CSS order property works:

响应式设计(Responsive Design)

¥Responsive Design

Quasar Flex CSS 类可以根据屏幕宽度应用，以帮助你创建响应式 UI。12 点网格的灵感来自 Bootstrap，因此有很多相似之处。

¥Quasar Flex CSS classes can be applied based on the width of the screen, to help you in making a responsive UI. The 12 points grid is inspired by Bootstrap’s, so there are a lot of similarities.

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

¥Breakpoint specifiers use a mobile-first approach, where the larger breakpoint definitions will override the smaller ones.

到目前为止，我们已经了解到，例如，我们可以不受窗口宽度影响地调整列的大小。如果我们要创建响应式 UI，则需要在考虑窗口宽度的同时动态更改大小。首先，让我们了解一些可以在 col-*、offset-* 和 col-auto 辅助类之间注入的令牌（请参阅下表了解令牌）。

¥What we’ve learned so far is that, for example, we can size the columns regardless of window width. If we are to create a responsive UI, we need to dynamically change the sizing while taking window width into account. First, let’s learn about some tokens that you can inject in middle of col-*, offset-* and col-auto helper classes (look at table below for tokens).

示例：col-md-7, offset-lg-3, col-xs-auto.

¥Example: col-md-7, offset-lg-3, col-xs-auto.

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

¥A full example: let’s say we have a row with three children. In extra small windows, we need to stack the children vertically, In small windows we need to display them side by side (each having equal width), and starting with medium windows we should display them all on same line:

<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%）。

¥Notice in the above example that we used col-xs-12 (12/12 = 100% of row, so each child will take full width of the container making all children stack vertically, since rows wrap content by default), col-sm-6 (6/12 = 50% of row) and col-md-4 (4/12 = 33% of row).

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

¥Like previously mentioned, rows wrap content by default, so when 12 (or more) grid points are used for a row, content is wrapped to the next line. If we have two <div>s and we use col-8 on both, they will also stack, since 8 + 8 = 16 and we can only display 12 points on a single line.

<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 元素。

¥Also check Visibility Style page to see thresholds on window width and these tokens (xs, sm, md, lg, xl) used on their own to hide or show DOM elements.

Flex 插件(Flex Addons)

¥Flex Addons

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

¥When enabled (through quasar.config file > framework > cssAddon: true) it provides breakpoint aware versions for all flex (and display) related CSS classes.

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

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

¥There are also responsive classes for spacing, both for padding and for 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

¥Examples: row-md, items-lg-end, q-pa-xs q-pa-sm-sm q-px-md-lg q-py-md-md

Flex Playground(Flex Playground)

要查看 Flex 的实际运行情况，你可以使用 Flex Playground 以交互方式了解更多信息。

¥To see the Flex in action, you can use the Flex Playground to interactively learn more.