align-self

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

align-self 属性允许为单个弹性项目覆盖 flexbox 的 align-items 属性。

它的可选值与 align-items 相同：

flex-start
flex-end
center
stretch
baseline

例如：

.item {
  align-self: center;
}

挑战

简单

这里有一个包含 3 个项目的 flexbox，请为每个 flex 项目添加 align-self。

为每个项目使用 flex-start、flex-end 和 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-content align-items align-content gap 完美居中

3Flex 项目

子元素 order flex-growalign-self

自己练习： Web 在线编辑器