13-Flex布局:让Todo列表像App

TUTORIAL · WEB DEV2026.07

网页=复制粘贴？

搭好HTML钢筋骨架

第一个页面今天就能跑

标签 · 属性 · 课程表实操

AI辅助Web开发入门 · 第10篇

HTMLTUTORIAL

📦 3 Parts + Conclusion

👉 滑动

PART 01

Flex 解决什…

核心章节

PART 02

先记住四个高频属…

要点

PART 03

五步实操：把 T…

要点

PART ///

写在最后

练一练

⭐️感谢点开文章👋，欢迎来到恒心智造坊！我是恒心😊

一位热爱技术分享的博主。如果觉得本文能帮到您，劳烦点个赞、在看支持一下哈👍！

— Flex布局信息图：display:flex 与 gap/justify-content/align-items、表单横排与任务项排版

PART

Flex 解决什么问题？

TUTORIAL · WEB DEV

默认情况下，块级元素会从上到下排。Todo 的输入框和按钮、任务文字和删除按钮，却更适合横向排列。Flexbox 就是专门处理「一排或一列元素如何对齐」的工具。

...css

.todo-row {

　　display: flex;

　　align-items: center;

　　gap: 12px;

}

PART

先记住四个高频属性

TUTORIAL · WEB DEV

属性	作用
`display: flex`	开启弹性布局
`gap`	子元素之间的间距
`justify-content`	主轴方向怎么排
`align-items`	交叉轴方向怎么对齐

PART

五步实操：把 Todo 列表排整齐

TUTORIAL · WEB DEV

STEP 01

表单横向排列

在 style.css 追加（若第 12 篇未写过可整段保留）：

...css

#todo-form { display: flex; gap: 8px; }

#todo-input { flex: 1; min-width: 0; }

预期：输入框占满剩余宽度，按钮不被挤出去。

STEP 02

任务列表 HTML

在 index.html 的 <main> 里加示例列表（第 18 篇会改成动态，今天先静态练布局）：

...html

　　　　<span>阅读 Flexbox 文档</span>

　　</li>

　　</li>

</ul>

STEP 03

任务项 Flex 样式

...css

.todo-list { list-style: none; padding: 0; margin: 16px 0 0; }

.todo-item {

　　display: flex;

　　align-items: center;

　　justify-content: space-between;

　　gap: 12px;

　　padding: 12px 0;

　　border-bottom: 1px solid #e5e7eb;

}

预期：文字在左、删除按钮在右，行与行之间有分隔线。

STEP 04

F12 试对齐

Elements → Styles 里改 .todo-item 的 justify-content：flex-start / center / space-between，看按钮位置变化，满意后写回 style.css。

预期：理解主轴对齐对横排布局的影响。

STEP 05

提交 Git（可选）

CMDgit add index.html style.css

CMDgit commit -m "feat: Flex 布局优化 Todo 列表"

预期：手机宽度缩小时输入框仍可用（必要时下一步学 flex-wrap）。

PART

本篇小结

SUMMARY · KEY TAKEAWAYS

记住一点：用 Flexbox 排好表单行和任务行，并在 F12 里试不同对齐方式。卡住时先对照「做完打卡」清单，再在留言区提问。

PART

AI 提示词参考

PROMPT · AI ASSIST

1. 用生活化语言理解概念（通用）

...code

我是 Web 开发零基础，正在学习「Flex布局：让Todo列表像App」。

请先用生活化比喻解释核心概念，再给一个最小可运行示例。

每段代码后说明运行结果，不要一次引入太多新名词。

2. 跟着做一遍（TRAE / 通义灵码）

...code

我正在跟专栏「AI辅助Web开发入门」第 13 篇做实操。

项目路径：【D:/web-learning/lessons/你的文件夹】

当前代码：

【粘贴 index.html / app.js / App.vue 等】

请每次只给一步：改哪个文件、粘贴什么、如何在浏览器或终端验证。等我回复后再继续。

3. 排查问题（通义灵码 / 通用）

...code

我在练习「Flex布局：让Todo列表像App」时遇到问题：左右分布没生效

这是代码：【粘贴代码】

这是浏览器报错或截图文字：【粘贴报错】

请按「最可能原因 → 检查步骤 → 最小修改」回答，不要直接重写整个项目。

4. 搜 B 站跟练（通用）

...code

我想在 B 站补充学习「Flex布局：让Todo列表像App」，请给 3 个中文搜索关键词。

分别标注适合 10 分钟速览还是 30 分钟跟练，并提醒我看视频时必须自己敲哪一段代码。

///

LAST

练一练

PRACTICE · EXERCISES

基础题 1：哪个属性开启 Flex 布局？

基础题 2：gap 和 margin 都能做间距，Flex 容器里优先用哪个？

挑战题：让移动端宽度较小时表单自动换行，尝试 flex-wrap: wrap。

///

LAST

常见报错

DEBUG · COMMON ERRORS

现象	原因	排查路径
左右分布没生效	父元素没有开启 flex	确认属性写在 `.todo-item`
输入框把按钮挤出屏幕	子项无法缩小	给输入框补 `min-width: 0`
列表圆点仍在	ul 默认样式	给列表加 `list-style: none; padding: 0`

///

LAST

做完打卡 & 留言提问

CHECKLIST · WRAP UP

跟完本篇后，请对照自查：

[ ] 表单输入框与按钮横向排列

[ ] 每条任务「文字 + 删除按钮」左右分布

[ ] 在 F12 里试过 justify-content 不同取值

验收标准：Todo 列表排版像小 App，不再纵向挤成一团

某一步卡住、报错看不懂、效果和文章不一致——欢迎在公众号留言区提问（写清：第几步 + 完整报错 + 你改了什么）。也可以把下面提示词发给通义灵码 / TRAE：

...code

我在跟专栏「AI辅助Web开发入门」第 13 篇做练习，卡在【第几步/现象】。

环境：Windows + 【VS Code / Chrome】

报错原文：【粘贴】