Flexbox介绍

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

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

TIP

本页涵盖Quasar Flex CSS类的基本理论,并为您准备了更深入学习的页面:网格行网格列网格Gutter

关键概念

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

管理父元素

设置方向

以下CSS类之一对于父元素是强制性的,以使子级上的CSS类(在下一节中描述)起作用。

类名说明
rowFlex行
row inline内联Flex行
columnFlex列
column inline内联Flex列
row reverseflex-direction设置为row-reverse的Flex行
column reverseflex-direction设置为column-reverse的Flex列

例子:

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

默认包裹

默认情况下,所有行和列都包裹其内容。

但是,如果您明确不想包裹,即您想将所有内容合并到一行中,那么添加no-wrap CSS辅助类。

另外,如果你想以相反的顺序换行,那么reverse-wrap就是可用的。

类名说明
wrap如有必要进行包裹(默认为“on”,不需要指定)
no-wrap即使有必要,也不要包裹
reverse-wrap如有必要逆向包裹

对齐

要沿主轴对齐,请使用以下类。 当一条线上的所有弹性元素都不灵活或灵活但达到其最大尺寸时,它有助于分配剩余的可用空间。 当元素溢出时,它也对元素的排列起到一定的控制作用。

对于垂直于主轴的对齐,使用下面的类。 这定义了flex元素沿当前行的横轴进行放置的默认行为。 将其视为横轴(垂直于主轴)的水平版本。

TIP

还有一个方便的flex centerCSS类,它相当于items center+justify center。它与flex, rowcolumn一起使用。

接下来的类在横轴上有额外的空间时对齐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-firstorder-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辅助类中注入的标记(查看下表中的标记)。

标记最小窗口宽度描述/如果未被另一个更大的断点覆盖,则适用
xs0px所有的窗口尺寸(与无断点指定符相同)
sm600px大于超小尺寸的窗口
md1024px大于小尺寸的窗口
lg1440px大于中尺寸的窗口
xl1920px大于大尺寸的窗口

例: 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类提供断点感知版本。

WARNING

请注意,启用后,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)进行交互了解更多信息。

Flex Playground