• 弹性布局（Flexbox）

本次介绍flexbox的align-items属性。它是用于在CSS中控制元素在交叉轴（垂直方向）上的对齐方式。优点是可以灵活地控制元素的对齐方式，以适应不同的布局需求。

align-items:

该属性用于控制元素在交叉轴上的对齐方式。通俗一点说就是控制元素在垂直方向上的对齐方式。

align-items:flex-start;

这种情况下是在交叉轴的起点对齐，具体效果如图所示：

align-items:flex-end;

此时元素在交叉轴的末尾对齐，具体效果如图所示：

这里可以看出，元素上方的位置已经空了出来，盒元素更贴近父元素的底部也就是末尾处。

align-items:center;

这里含义是元素在交叉轴的中央对齐，即居中。

这里我给父元素加了一个黑色的边框让效果看起来更明显，可以看出此时盒子1-3都已经在交叉轴的中央位置对齐显示了。

align-items:baseline;

这个属性的意思是按照元素的基线对齐。这种对齐方式的优点是可以使不同元素的底部保持在同一水平线上。不过相应也存在缺点即如果元素内没有文本内容或行内元素，则基线对齐可能不会产生明显效果，因为没有基线可供对齐。具体效果如图所示：

align-items:stretch;（默认）

默认效果是使得元素在垂直方向上被拉伸，以使其高度与容器的高度相等。

此时可以看到效果十分明显。但是当我给盒元素统一添加一个高度height: 100px;时，效果又不一样了。

此时可以看出当子元素有高度时，该属性并不生效。

本篇笔记就介绍到这里，下一篇我会接着介绍和这个属性相似的align-content属性。