Flexbox中子元素对齐方式如何设置_align-items属性详解

align-items用于设置flex容器内子元素在交叉轴上的对齐方式，常用值包括stretch（拉伸填充）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）和baseline（基线对齐），默认为stretch；通过在容器上设置align-items可统一控制所有子项的垂直对齐行为，实现如垂直居中、顶部对齐等布局效果；当主轴为column时，交叉轴变为水平方向，align-items则控制左右对齐；若需单独调整某个子元素，可使用align-self覆盖父级设置。

在使用 Flexbox 布局时，align-items 是控制子元素在交叉轴（cross axis）上对齐方式的关键属性。它作用于容器（flex container），用来统一设置所有子元素的垂直对齐行为。理解这个属性有助于快速实现常见的布局需求，比如垂直居中、顶部对齐等。

align-items 的基本语法

在父容器上设置 align-items，语法如下：

.container {
  display: flex;
  align-items: <value>;
}

其中 <value> 可以是以下几种常用值：

常用的 align-items 取值说明

1. stretch（默认值）
当子元素在交叉轴方向没有设定尺寸时，会自动拉伸填满整个容器的高度（或宽度，取决于主轴方向）。

适用于希望子元素高度一致的场景，例如卡片布局。

2. flex-start
子元素在交叉轴的起点对齐。如果是横轴为主轴（row），则表现为顶部对齐。

适合需要顶部对齐内容的布局，如导航栏或标题区域。

3. flex-end
子元素在交叉轴的终点对齐。在横向布局中表现为底部对齐。

可用于将内容靠下排列，比如页脚固定在容器底部。

4. center
子元素在交叉轴上居中对齐。这是实现垂直居中最简单的方式之一。

常用于弹窗、登录框等需要居中的界面元素。

5. baseline
子元素按文本基线对齐。特别适合包含不同字号或行高的文字类元素。

在多个文本项并排显示时，能保持文字视觉上的对齐。

实际应用示例

假设有一个容器包含三个不同高度的子元素：

.container {
  display: flex;
  align-items: center;
}

.item {
  width: 100px;
}

此时无论每个 .item 内容多少，它们都会在容器中垂直居中对齐。

若将 align-items 改为 stretch，且未设置高度，则所有子元素会被拉伸到与最高子元素相同高度。

注意事项

该属性设置的是所有子元素的统一对齐方式。如果需要单独控制某个子元素的对齐，可以使用 align-self 属性覆盖父容器的设置。

另外，交叉轴的方向受 flex-direction 影响。例如，当主轴为 column 时，交叉轴变为水平方向，此时 align-items 控制的是左右对齐。

基本上就这些。掌握 align-items 能让你更轻松地处理 Flexbox 中的对齐问题，尤其是垂直方向的布局控制。