跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

主轴对齐

使用 justify-content 工具类来改变主轴上 flex 项的对齐方式。

查看原文
本页目录
类名样式
.justify-content-startjustify-content: flex-start;
.justify-content-endjustify-content: flex-end;
.justify-content-centerjustify-content: center;
.justify-content-betweenjustify-content: space-between;
.justify-content-aroundjustify-content: space-around;
.justify-content-evenlyjustify-content: space-evenly;

概览

在弹性盒子容器上使用 justify-content 工具类来改变主轴上弹性子项的对齐方式（x 轴为起点，如果是 flex-direction: column 则为 y 轴）。从 start（浏览器默认）、end、center、between、around 或 evenly 中选择。

基本用法

证明合理性
内容
开始
证明
内容
结束
证明合理性
内容
中心
证明合理性
内容
在……之间
证明合理性
内容
周围
证明合理性
内容
均匀地
HTML
          <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>

响应式

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

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .sm:justify-content-start
  • .sm:justify-content-end
  • .sm:justify-content-center
  • .sm:justify-content-between
  • .sm:justify-content-around
  • .sm:justify-content-evenly
  • .md:justify-content-start
  • .md:justify-content-end
  • .md:justify-content-center
  • .md:justify-content-between
  • .md:justify-content-around
  • .md:justify-content-evenly
  • .lg:justify-content-start
  • .lg:justify-content-end
  • .lg:justify-content-center
  • .lg:justify-content-between
  • .lg:justify-content-around
  • .lg:justify-content-evenly
  • .xl:justify-content-start
  • .xl:justify-content-end
  • .xl:justify-content-center
  • .xl:justify-content-between
  • .xl:justify-content-around
  • .xl:justify-content-evenly
  • .2xl:justify-content-start
  • .2xl:justify-content-end
  • .2xl:justify-content-center
  • .2xl:justify-content-between
  • .2xl:justify-content-around
  • .2xl:justify-content-evenly

CSS

Sass 工具 API

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

scss/_utilities.scss
"justify-content": (
  responsive: true,
  property: justify-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
),