完整的Flexbox教程:2020年学习CSS3 Flexbox-Complete Flexbox Course: Learn CSS3 Flexbox in 2020

你将会学到的
  • 放心地使用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设计人员和开发人员
  • 想要提高生产力的设计师
  • 任何想跟上网络标准最新发展的人
https://www.udemy.com/course/flexbox-tutorial/

教程下载地址

评论0

请先

没有账号? 注册  忘记密码?

社交账号快速登录