内容对齐

概览

在弹性盒子容器上使用 align-content 工具来在交叉轴上 一起 对齐弹性项目。可选择 start（浏览器默认）、end、center、between、around 或 stretch。为了演示这些工具，我们已应用 flex-wrap: wrap 并增加了弹性项目的数量。

注意！ 这个属性对单行弹性项目没有效果。

基本用法

开始

          <div class="d-flex align-content-start flex-wrap">...</div>
        

结束

          <div class="d-flex align-content-end flex-wrap">...</div>
        

中心

          <div class="d-flex align-content-center flex-wrap">...</div>
        

之间

          <div class="d-flex align-content-between flex-wrap">...</div>
        

周围

          <div class="d-flex align-content-around flex-wrap">...</div>
        

拉伸

          <div class="d-flex align-content-stretch flex-wrap">...</div>
        

响应式

align-content也存在响应式变体。

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch
• .sm:align-content-start
• .sm:align-content-end
• .sm:align-content-center
• .sm:align-content-between
• .sm:align-content-around
• .sm:align-content-stretch
• .md:align-content-start
• .md:align-content-end
• .md:align-content-center
• .md:align-content-between
• .md:align-content-around
• .md:align-content-stretch
• .lg:align-content-start
• .lg:align-content-end
• .lg:align-content-center
• .lg:align-content-between
• .lg:align-content-around
• .lg:align-content-stretch
• .xl:align-content-start
• .xl:align-content-end
• .xl:align-content-center
• .xl:align-content-between
• .xl:align-content-around
• .xl:align-content-stretch
• .2xl:align-content-start
• .2xl:align-content-end
• .2xl:align-content-center
• .2xl:align-content-between
• .2xl:align-content-around
• .2xl:align-content-stretch

CSS

Sass 工具 API

对齐内容的工具类在我们的工具类 API 中声明，位于 scss/_utilities.scss。了解如何使用工具类 API。

"align-content": (
  responsive: true,
  property: align-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
  )
),