align-items

Coddy CSS Flexbox：完整课程课程的第 8 课，共 15 课。

align-items 属性定义了沿交叉轴的对齐方式。

列方向的交叉轴是水平的，行方向的交叉轴是垂直的。

它接受五个值：

flex-start：将项目对齐到交叉轴的起点。
flex-end：将项目对齐到交叉轴的终点。
center：将项目对齐到交叉轴的中心。
stretch：项目沿交叉轴拉伸，以填满容器。
baseline：对齐项目，使它们的基线对齐。

弹性容器的默认值是 stretch。

例如：

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

挑战

简单

将给定弹性盒子的交叉轴对齐方式设为 center。

你应该试试所有值！

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

CSS Flexbox：完整课程中的所有课

1简介

简介容器与元素

2弹性容器

Flexbox flex-direction flex-wrap flex-flow justify-contentalign-itemsalign-content gap 完美居中

3Flex 项目

子元素 order flex-grow align-self

自己练习： Web 在线编辑器