使用 CSS 实现原子弹性布局

简介

在这个项目中，你将学习如何使用 CSS 实现基于属性的原子弹性布局。原子 CSS 是一种流行的 CSS 构建方法，它通过使用基于属性的样式来简化 CSS 的编写。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用 CSS 实现基于属性的原子弹性布局
• 如何对弹性布局中的各个弹性项目进行样式设置

🏆 成果

完成这个项目后，你将能够：

• 使用基于属性的 CSS 创建灵活的布局
• 对弹性布局中的各个元素进行样式设置
• 理解使用原子 CSS 进行高效且可维护的 CSS 开发的好处

Skills Graph

设置项目结构

原子 CSS 是一种近来非常流行的 CSS 构建方法，而基于属性的（Attributify）原子 CSS 进一步简化了 CSS 的编写。

例如，传统上我们通过在元素上创建一个类标识符来实现 flex，然后在 CSS 中通过选择器来选择该元素：

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

使用基于属性的原子 CSS，我们可以用以下方式做同样的事情。

<div flex></div>

要开始，请打开实验环境，目录结构如下：

├── css
│   └── style.css
└── index.html

其中：

• css/style.css 是需要补充代码的样式文件。
• index.html 是主页。

点击右下角的“实时预览”以打开端口 8080，在浏览器中预览 index.html 页面，效果如下：

实现基于属性的原子弹性布局

在这一步中，你将学习如何使用 CSS 实现基于属性的原子弹性布局。

1. 打开 css/style.css 文件。
2. 在 CSS 文件中找到 /* TODO */ 部分。
3. 添加以下 CSS 规则以实现基于属性的原子弹性布局：

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

此规则针对具有 flex="~ col" 属性的 div 元素，并应用必要的样式来创建垂直弹性布局。

display: flex 属性将元素设置为使用弹性布局，而 flex-direction: column 属性将弹性方向设置为垂直。

4. 保存 style.css 文件。
5. 返回浏览器并刷新页面。你应该会看到以下效果：

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。