<content-distribution>

<content-distribution> 枚举值类型由 justify-contentalign-content 属性,以及 place-content 简写属性使用,用于在容器的对齐主体之间分配额外空间。

语法

<content-distribution> = space-between | space-around | space-evenly | stretch

以下关键词值由 <content-distribution> 语法术语表示:

space-between

在对齐容器内均匀分布对齐主体。第一个项目与对齐容器的起始边缘对齐,最后一个项目与对齐容器的结束边缘对齐,其余项目均匀分布,使得任意两个相邻项目之间的间距相同。space-between 的默认回退对齐方式在弹性布局中是 safe flex-start,否则是 start。如果只有一个项目,该项目将与起始边缘对齐。

space-around

项目在容器中均匀分布,两端各有一个半尺寸的空间。任意两个相邻项目之间的间距相同,且第一个项目之前和最后一个项目之后的间距是其他间距的一半。space-around 的默认回退对齐方式是 safe center。如果容器只有一个子项,该项目将居中。

space-evenly

项目在容器中均匀分布,两端各有一个完整尺寸的空间。任意两个相邻项目之间、第一个项目之前和最后一个项目之后的间距都相同。space-evenly 的默认回退对齐方式是 safe center。如果容器只有一个子项,该项目将居中。

stretch

如果项目的总尺寸小于容器的尺寸,任何可以增长的项目将等比例(非按比例)增加其尺寸,同时仍然遵循由 max-heightmax-width 或等效功能施加的约束,以使项目的总尺寸正好填满容器。stretch 的默认回退对齐方式在弹性盒子中是 flex-start,在其他布局模式中是 start。如果只有一个项目,并且该项目可以增长,它将增长以填满容器。

规范

规范
CSS Box Alignment Module Level 3
# typedef-content-distribution

另见