Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

align-content

介绍

在弹性布局中，align-content 定义了弹性行（flex line）在交叉轴上对齐方式。

在网格布局中，align-content 定义了如何对齐网格轨道到块轴。

使用示例

css-apisrc/align-content/App.tsx
预览

语法

/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */

/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around; /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: stretch; /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */

取值

stretch

默认值。如果元件沿交叉轴（网格布局是块轴）的组合尺寸小于对齐容器的尺寸，任何对应尺寸设置为 auto 的元件的尺寸都会等比例地增加其尺寸（而不是按比例增加），可仍然遵守由 max-height/max-width（或相应功能）施加的约束，以便沿交叉轴（网格布局是块轴）完全填充对齐容器的组合尺寸。

start

所有行从容器的起始边缘开始填充。

end

所有行从容器的结束边缘开始填充。

flex-start

同 start 表现一致。建议只在弹性布局上使用。

flex-end

同 end 表现一致。建议只在弹性布局上使用。

center

所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴（网格布局是块轴）起点边和第一行的距离相等于容器的交叉轴（网格布局是块轴）终点边和最后一行的距离。

space-between

所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴（网格布局是块轴）起点边和终点边分别与第一行和最后一行的边对齐。

space-around

所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴（网格布局是块轴）起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

形式定义

初始值stretch
适用元素弹性容器和网格容器
是否支持继承否
是否支持动画否

形式语法

align-content = stretch | start | end | flex-start | flex-end | center | space-between | space-around

与 Web 的区别

mdn: align-content

  1. 不支持 normal、baseline、first baseline、last baseline，默认值为 stretch。
  2. 不支持 space-evenly，后续会支持。

兼容性

Loading

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。