<content-distribution>
<content-distribution> 枚举值类型由 justify-content 和 align-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-height、max-width或等效功能施加的约束,以使项目的总尺寸正好填满容器。stretch的默认回退对齐方式在弹性盒子中是flex-start,在其他布局模式中是start。如果只有一个项目,并且该项目可以增长,它将增长以填满容器。
规范
| 规范 |
|---|
| CSS Box Alignment Module Level 3 # typedef-content-distribution |
另见
- 使用此数据类型的属性:
align-content,justify-content,place-content - 其他盒子对齐数据类型:
<baseline-position>,<content-position>,<overflow-position>, 和<self-position> - CSS 盒模型对齐模块
- CSS 弹性盒子布局模块
- CSS 网格布局模块