Flex

我们参考 Bootstrap 5 定义了适用于 Acorn 较为轻量的 Flex 工具，可以在自定义布局的时候快速管理组件的对齐方式。

Justify content

在 Flex 容器上使用 justify-content 来更改项目在主轴上的对齐方式（开始时为 X 轴，如果是 flex-direction: column 则是 Y 轴），可以选择从开始、结束、中心、中间、周围、或平均。

Flex item

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Align items

在 Flex 容器上使用 align-items 来更改交叉轴上 Flex 项目的对齐方式（开始时为 Y 轴，如果 flex-direction: column 则为 X 轴），可选择开始、结束、中心、基线、或延伸（浏览器默认）。

Flex item

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Align self

在 Flex 项目上使用 align-self 来分别更改项目自身在容器交叉轴上的对齐方式（开始时是 Y 轴，如果 flex-direction: column 则是 X 轴），可以选择从开始、结束、居中、基线、或伸展（浏览器默认值）。

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

参考：Bootstrap Flex