Utilities

Introduction

Mautic 提供了一组 CSS 工具类，旨在促进使用 CSS flexbox 实现灵活布局。这些工具类提供了一种系统的方法来构建响应式和动态的用户界面区域，使您能够快速原型设计并构建复杂的布局，同时最大限度地减少自定义 CSS 的用量。

这些工具类试图涵盖广泛的 flexbox 属性，包括：

• 显示设置

• 弹性方向

• 包裹行为

• 对齐和间距

• 间距管理

• 项目排序

关键方面

1. 简短命名规范: 类名遵循逻辑、简洁且易于记忆的约定。

2. 覆盖最常见的用法: 工具类涵盖了所有 flexbox 属性和行为。

3. 响应式设计: 包括针对不同视口尺寸的变体，从而能够对设备上的布局进行精细控制。

4. 可组合性: 您可以将类组合起来创建复杂的布局模式。

5. 一致的间距: 标准化的选项用于管理内边距、外边距和间距属性。

本文档清晰地解释了每个工具类的功能及其用法，并提供了实际示例以及结合使用工具类以实现复杂布局要求的最佳实践。

以下部分详细介绍了各个工具类、其用法以及高级实施策略。此资源可帮助前端开发人员高效地在他们的项目中利用 flexbox。

缩写键

• d: display (显示)

• fd: flex-direction (弹性方向)

• fw: flex-wrap (包裹)

• jc: justify-content (主轴对齐)

• ai: align-items (交叉轴对齐)

• ac: align-content (多行交叉轴对齐)

• as: align-self (项目自身交叉轴对齐)

• fg: flex-grow (弹性增长)

• fs: flex-shrink (弹性收缩)

• fb: flex-basis (初始尺寸)

• fo: order (顺序)

Flex 容器属性

显示属性

• .d-flex: 将元素设置为 flex 容器，并将元素的 display 属性设置为 flex。这允许该元素的直接子元素在 flex 上下文中进行布局。

方向属性

• .fd-row: 将容器中弹性项的方向设置为行。项目从左向右排列。

• .fd-row-reverse: 将容器中弹性项的方向设置为行，但反向排列。项目从右向左排列。

• .fd-column: 将容器中弹性项的方向设置为列。项目从上到下排列。

• .fd-column-reverse: 将容器中弹性项的方向设置为列，但反向排列。项目从下到上排列。

包裹属性

• .fw-wrap: 允许弹性项目在必要时换行到多行。

• .fw-nowrap: 防止弹性项目换行到多行，即使它们在一行中没有足够的空间。

• .fw-wrap-reverse: 允许弹性项目在必要时换行到多行，但方向相反。

对齐属性

• .jc-start: 将弹性项目沿主轴对齐到起始位置。 在行方向上，这是左边缘；在列方向上，这是顶部边缘。

• .jc-end: 将弹性项目沿主轴对齐到结束位置。 在行方向上，这是右边缘；在列方向上，这是底部边缘。

• .jc-center: 将弹性项目沿主轴对齐到中心位置。

• .jc-space-between: 均匀地分布弹性项目沿主轴，第一个项目位于起始位置，最后一个项目位于结束位置。

• .jc-space-around: 均匀地分布弹性项目沿主轴，每个项目周围都有相等的空间。

• .jc-space-evenly: 均匀地分布弹性项目沿主轴，每个项目之间以及第一个和最后一个项目都具有相等的空间。

对齐属性

对齐项目

• .ai-start: 将弹性项目沿交叉轴对齐到起始位置。 在行方向上，这是顶部边缘；在列方向上，这是左边缘。

• .ai-end: 将弹性项目沿交叉轴对齐到结束位置。 在行方向上，这是底部边缘；在列方向上，这是右边缘。

• .ai-center: 将弹性项目沿交叉轴对齐到中心位置。

• .ai-baseline: 将弹性项目沿其基线对齐。 基线是文本行的字母所依附的行。

• .ai-stretch: 沿着交叉轴拉伸弹性项目以填充容器。

对齐内容

• .ac-start: 当交叉轴有额外空间时，将弹性项目的行沿交叉轴的起始位置对齐。

• .ac-end: 当交叉轴有额外空间时，将弹性项目的行沿交叉轴的结束位置对齐。

• .ac-center: 当交叉轴有额外空间时，将弹性项目的行沿交叉轴的中心位置对齐。

• .ac-space-between: 当交叉轴有额外空间时，均匀地分布弹性项目的行沿交叉轴，第一个行位于起始位置，最后一个行位于结束位置。

• .ac-space-around: 当交叉轴有额外空间时，均匀地分布弹性项目的行沿交叉轴，每个行周围都有相等的空间。

• .ac-stretch: 当交叉轴有额外空间时，拉伸弹性项目的行以填充容器。

自对齐

• .as-start: 将单个弹性项目沿交叉轴的起始位置对齐。

• .as-end: 将单个弹性项目沿交叉轴的末端对齐。

• .as-center: 将单个弹性项目沿交叉轴的中心对齐。

• .as-baseline: 将单个弹性项目沿基线对齐。

• .as-stretch: 使单个弹性项目在交叉轴方向上拉伸以填充容器。

弹性项目属性

弹性增长属性

• .fg-1: 将弹性项目的弹性增长因子设置为 1。 这意味着该项目将扩展以填充容器中的任何剩余空间。

• .fg-0: 将弹性项目的弹性增长因子设置为 0。 这意味着该项目不会扩展以填充容器中的任何剩余空间。

弹性收缩属性

• .fs-1: 将弹性项目的弹性收缩因子设置为 1。 这意味着如果需要，该项目可以缩小以适应容器。

• .fs-0: 将弹性项目的弹性收缩因子设置为 0。 这意味着该项目无法缩小以适应容器。

弹性基础属性

• .fb-auto: 将弹性项目的基础设置为 auto。 这意味着浏览器将根据其内容计算项目的大小。

• .fb-0: 将弹性项目的基础设置为 0。 这意味着在进行任何增长或收缩之前，该项目的大小为 0。

弹性顺序属性

• .fo-auto: 将弹性项目的顺序设置为 auto。 这意味着该项目将按照其在源代码中出现的顺序排列。

• .fo-0, .fo-1, .fo-2, .fo-3, .fo-4, .fo-5: 将弹性项目的顺序设置为指定的数字。 这意味着该项目将按照该顺序排列，无论它在源代码中出现的哪个位置。

• .gap-20, .gap-lg: 将弹性项目之间的间距设置为 20px。

• .gap-15, .gap-md: 将弹性项目之间的间距设置为 15px。

• .gap-10, .gap-sm: 将弹性项目之间的间距设置为 10px。

• .gap-5, .gap-xs: 将弹性项目之间的间距设置为 5px。

• .gap-4: 将弹性项目之间的间距设置为 4px。

• .gap-3: 将弹性项目之间的间距设置为 3px。

• .gap-2: 将弹性项目之间的间距设置为 2px。

• .gap-1: 将弹性项目之间的间距设置为 1px。

• .gap-0: 将弹性项目之间的间距设置为 0px。

响应式变体

这些实用程序遵循移动优先的响应式设计原则，并在特定的最小屏幕尺寸下生效。 您可以通过在实用类名称的末尾添加 -sm、-md 或 -lg 来创建这些响应式变体。

• 基本实用程序无后缀：适用于所有屏幕尺寸

• -sm 后缀：从小型断点开始应用

• -md 后缀：从中型断点开始应用

• -lg 后缀：从大型断点开始应用

例如:

• .d-flex applies to all screen sizes

• .d-flex-sm applies from the small breakpoint and up

• .d-flex-md applies from the medium breakpoint and up

• .d-flex-lg applies from the large breakpoint and up

This approach allows for progressive enhancement of layouts as the view-port size increases, providing fine-grained control over the responsiveness of your design.

Responsive examples

Here are some example scenarios that illustrate how to use these utilities in practice:

<div class="d-flex jc-space-between ai-center">
  <div>Left content</div>
  <div>Center content</div>
  <div>Right content</div>
</div>

This example creates a flex container with items spread across the container and vertically centered.

<div class="d-flex fd-column ai-stretch gap-10">
  <div>Top item</div>
  <div>Middle item</div>
  <div>Bottom item</div>
</div>

This example creates a vertical stack of items that stretch to fill the container’s width, with a 10px gap between them.

Combining utilities

Note that you can combine these utilities to create complex layouts. For example:

<div class="d-flex fd-row-md fd-column fw-wrap jc-center ai-center gap-15">
  <!-- Flex items here -->
</div>

This combination creates a flex container that:

• Is a column on small screens and a row on medium screens and up

• Wraps items if they don’t fit

• Centers items both horizontally and vertically

• Has a 15px gap between items

Padding and margin utilities

The CSS utility classes for padding and margin provide a comprehensive set of options for controlling spacing within your layouts. These utilities follow a consistent naming convention and offer a range of predefined sizes, including pixel values and variable-based spacing.

Naming convention

The utility classes use the following prefixes:

• pa-: padding all sides

• pt-: padding top

• pr-: padding right

• pb-: padding bottom

• pl-: padding left

• ma-: margin all sides

• mt-: margin top

• mr-: margin right

• mb-: margin bottom

• ml-: margin left

Size options

The utilities offer the following size options:

1. Pixel-based sizes: 0, 1, 2, 3, 4, 5, 10, 15, 20 pixels

2. Variable-based sizes: 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 160 pixels (using CSS variables)

3. Named sizes: xs (5px), sm (10px), md (15px), lg (20px), xl (32px)

Padding and margin examples

<div class="pa-5">Padding 5px on all sides</div>
<div class="pt-10 pb-10">Padding 10px on top and bottom</div>
<div class="pl-md pr-md">Padding 15px on left and right</div>
<div class="ma-lg">Margin 20px on all sides</div>
<div class="mt-32 mb-32">Margin 32px on top and bottom</div>

基于变量的尺寸

某些工具使用 CSS 变量进行间距设置，这使得主题定制更加容易，并且可以在整个应用程序中保持一致的间距：

• var(--spacing-03) 到 var(--spacing-13)

这些对应于特定的像素值 - 例如，var(--spacing-03) 是 8px，var(--spacing-13) 是 160px。

Note

所有内边距和外边距工具都使用 !important 声明，以确保它们优先于其他样式。 请谨慎使用这些工具，以维护 CSS 架构的完整性。