align-items用于设置flex容器中子元素在交叉轴上的对齐方式,常见值有flex-start、flex-end、center、baseline和stretch(默认值),其对齐方向取决于flex-direction:row时控制垂直对齐,column时控制水平对齐。

align-items 是 CSS Flexbox 布局中的一个属性,用来控制弹性容器(flex container)中所有子元素在交叉轴(cross axis)上的对齐方式。
简单来说,如果你把 flex 容器想象成一行或一列,主轴是项目排列的方向(由 flex-direction 决定),而交叉轴就是与之垂直的方向。align-items 就决定了这些项目在交叉轴上怎么对齐。
本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看
常见取值及作用
以下是align-items 的主要可选值:- flex-start:项目在交叉轴起点对齐。
- flex-end:项目在交叉轴终点对齐。
- center:项目在交叉轴居中对齐。
- baseline:项目按基线对齐,常用于文本对齐场景。
- stretch(默认值):项目拉伸填满整个容器(前提是项目没有设置固定高度)。
使用示例
假设你有一个垂直居中需求的容器:
.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 200px;
}
此时,无论子元素多高,都会在容器中垂直居中显示。注意点
该属性只在设置了display: flex 或 display: inline-flex 的容器上生效。它的对齐效果取决于 flex-direction。例如:- 当
flex-direction: row时,交叉轴是垂直方向,align-items 控制上下对齐。 - 当
flex-direction: column时,交叉轴是水平方向,align-items 控制左右对齐。
基本上就这些,不复杂但容易忽略细节。









