你将会学到的
- 放心地使用CSS Flexbox创建现代布局
- 更有效地创建网站设计
- 编写高质量且可重用的CSS代码
- 垂直对齐任何元素
- 占用容器中的剩余空间
- Flexbox美丽的响应式画廊
- 实施所谓的圣杯布局
要求
- 基本的HTML和CSS
- 使用代码编辑器
说明
完成本课程后，您将可以使用Flexbox来…
- 垂直对齐任何元素
- 创建现代网格
- 占用剩余空间
- 在元素之间增加间距
- 实施完整的网站布局
- 以及更多！
这门课程中有更多东西：
- 我会回答您可能遇到的所有问题，以确保您达到学习目标
- 我已经 在本课程中添加了手动的高质量字幕（CC）
- 为了在实践中看到Flexbox， 3个小型项目 将展示您的技能，并使您可以在以后的Web设计项目中高效地使用Flexbox。
在本教程中，您将学习如何使用每个Flexbox属性：
设置伸缩容器的样式：
- 弹性方向
- 证明内容
- 对齐项目
- 柔性包装
- 对齐内容
然后是各个弹性项目：
- 订购
- 自我调整
- 弹性成长
- 弯曲收缩
- 弹性基础
- 柔性
最后，我们将看一下实际的 Flexbox示例，以了解可以实现哪种布局：
- 使用Flexbox的简单网格，其中所有列的大小均相同
- 更高级的Flexbox网格，其中列可以具有任意大小
- 垂直居中以垂直对齐任何元素
- 媒体对象，流行的OOCSS模式
- The Holy Grail Layout，一个完整的站点布局，带有侧边栏和粘性页脚
作为奖励，本课程包括完整的Flexbox备忘单，您可以使用它来概述所学内容，并在使用Flexbox时参考。此外，我还提供了Flexbox演示展示的代码 -就像一个交互式备忘单，您可以在浏览器中查看该备忘单，其中包含本教程中的每个属性和每个布局示例。
此课程针对某个人：
- 想要提高前端技能的Web设计人员和开发人员
- 想要提高生产力的设计师
- 任何想跟上网络标准最新发展的人
评论0