/

Quarkdown

v2.4.0

文档

本页目录

堆栈

堆栈函数是一类布局函数，它们根据特定的布局规则来排列一组元素。共有三个：

块

要理解哪些元素会被处理，堆栈函数依赖于严格的 Markdown 块概念，即文档中一个独立的片段：一个段落、一个代码块、一个列表、一段引用、一个插图，或另一次函数调用。

示例 1

.row gap:{1cm}
    A

    B

    C

A

B

C

示例 2

以下示例只有一个项，因为 A、B 和 C 都属于同一个段落（由于惰性行）：

.row gap:{1cm}
    A
    B
    C

ABC

示例 3

.row
    ![](assets/icon.svg)

    ![](assets/icon.svg)

参数

所有的堆栈函数都接受以下可选参数：

参数说明可接受值
alignment主轴对齐方式（CSS justify-content）。start、center、end、spacebetween、spacearound、spaceevenly
cross交叉轴对齐方式（CSS align-items）。start、center、end、stretch
gap项与项之间的间距。Size

grid 函数需要一个 columns 参数，必须指定为整数。
它还提供可选的 vgap 与 hgap 参数来覆盖 gap 设置，让你可以独立控制垂直与水平间距。

示例 4

.grid columns:{2} alignment:{spacearound}
    A

    *B*

    **C**

    ***D***

A

B

C

D

组合

你可以组合多个堆栈函数来创建复杂的布局：

示例 5

.row alignment:{spacearound}
    .column
        **Michael Scott**

        Dunder Mifflin Paper Company, Inc.

        [michaelscott@example.com](mailto:michaelscott@example.com)

    .column
        **Forrest Gump**

        Bubba Gump Shrimp Co.

        [forrestgump@example.com](mailto:forrestgump@example.com)

Michael Scott

Dunder Mifflin Paper Company, Inc.

michaelscott@example.com

Forrest Gump

Bubba Gump Shrimp Co.

forrestgump@example.com