CSS align-items详解

一、基本概念

align-items是指定义在flex容器上的属性，用于控制flex子元素在flex容器中的垂直对齐方式。该属性定义了在交叉轴（Cross Axis）上，如果存在多个子元素，如何对其进行对齐。

align-items的常见取值为flex-start（在容器交叉轴的起始位置对齐）、flex-end（在容器交叉轴的结束位置对齐）、center（在容器交叉轴的中心位置对齐）、stretch（默认状态，将子元素在交叉轴方向上拉伸填充满容器交叉轴空间）等。

二、实现垂直居中

在flex布局中，在父元素上设置display:flex可以使子元素按照一定的规则进行排列。如果想要实现垂直居中，除了设置flex-direction: column使子元素从上往下排列外，还可以设置align-items:center属性。

.parent{
  display:flex;
  flex-direction:column;
  align-items:center;
}

上述代码中，flex-direction: column是让子元素从上往下排列的属性，而align-items:center属性是垂直居中的实现方式。

三、实现底部对齐

通过设置align-items:flex-end属性可以将子元素放在容器的底部。

.parent{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

上述代码中，flex-direction: column是让子元素从上往下排列的属性，而align-items:flex-end则让子元素对齐到容器的底部。

四、实现左对齐

除了实现垂直居中、底部对齐，align-items属性还可以用于实现左对齐。

.parent{
  display:flex;
  align-items:flex-start;
}

上述代码中，align-items:flex-start属性将子元素向左对齐，因为flex-direction默认为row。

五、实现上对齐

通过调整容器高度，可以实现子元素上对齐。在父元素上设置align-items:flex-start属性，子元素设置高度为100%即可。

.parent{
  display:flex;
  align-items:flex-start;
  height:200px;
}
.child{
  height:100%;
}

六、总结

align-items是用于控制flex子元素在flex容器中的垂直对齐方式的属性，常见取值为flex-start、flex-end、center、stretch等。通过设置不同的取值，可以实现垂直居中、底部对齐、左对齐、上对齐等效果。