Complete Flexbox Course: Master CSS3 Flexbox for Good

本教程教你如何使用新的 CSS3 弹性盒模型来更有效地创建响应式网页布局！

讲师:Peter Sommerhoff

您将学到什么

• 自信地使用 CSS Flexbox 创建现代布局
• 更有效地创建网站设计
• 编写高质量且可重用的 CSS 代码
• 垂直居中任何元素
• 占据容器中的剩余空间
• 美观的响应式图片库，使用 Flexbox 实现
• 实现所谓的圣杯布局

课程要求

• 基础 HTML 和 CSS
• 使用代码编辑器

课程描述

本课程结束后，你将能够使用 Flexbox：
垂直居中任何元素
创建现代网格布局
占用剩余空间
在元素之间添加间距
实现完整的网站布局
以及更多！

本课程中的更多精彩内容包括：
我会回答你在学习过程中遇到的所有问题，确保你能达成学习目标。
我为本课程添加了手动高质量字幕（CC）。
为了让你的实际技能得到体现，并在未来网页设计项目中高效使用 Flexbox，你将完成 3 个迷你项目。

学生对我的评价
（摘自我的其他课程）
这门课太棒了。这是我第二次上 Peter Sommerhoff 的课。
一位非常出色的讲师，用极其简单的方式解释材料。
– Ahmed

我绝对爱上了这门课，它详细地教给你所需的一切知识！他们真的倾听学生的意见并迅速回答问题。感谢你发布这门课程，期待你的其他课程！
– Ana

非常好的课程，Peter 讲解得很透彻，并且会在一天内回复任何问题。
– Dunja

本课程快速而简洁地涵盖了所有必要信息，没有冗余内容或浪费时间的部分。它提供了足够的额外信息和文档指引。我认为这是一笔好交易。
– Robert

很高兴收到学生们的如此好评——我会尽我所能为你提供最好的学习体验。

请查看下面的免费预览视频。
期待在课程中见到你 : )
***
在这门教程中，你将学会使用每一个 Flexbox 属性：
为 flex 容器进行样式设置：
flex-direction
justify-content
align-items
flex-wrap
align-content

然后是单个 flex 项目：
order
align-self
flex-grow
flex-shrink
flex-basis
flex

最后，我们将通过一些实际的 Flexbox 示例来了解可以实现哪些布局类型：
使用 Flexbox 创建简单网格，其中每一行中的所有列大小相同
更高级的 Flexbox 网格，其中各列可以有不同的尺寸
垂直居中元素
媒体对象，一种流行的 OOCSS 模式
圣杯布局，一个完整的网站布局，包含侧边栏和粘性页脚

作为额外内容，本课程包括一份完整的 Flexbox 快捷参考表，供你回顾所学知识，并在使用 Flexbox 时查阅。

此外，我还提供了 Flexbox 示例展示的代码——这是一个交互式的快捷参考工具，在浏览器中展示了本教程中的每一个属性和布局示例。

本课程适合谁:

• 希望提升前端技能的网页设计师和开发者
• 希望提高工作效率的设计师
• 任何希望跟上网页标准最新发展的人都可以学习