FlexBox和CSS网格是2018年的#1 Web开发者技能,因为这些新技术解决了许多网络设计挑战。专业的Web开发人员目前必须优化他们的设计,以平衡许多不同的优先级。例如,Web设计必须是像素 - 完美,并在各种浏览器中的所有尺寸的设备以及其不同的版本(例如,Google Chrome 56 Vs.Chrome 57)。此外,用户希望网页快速加载。

设计师和开发人员必须在受到基本潜在技术的局限性的限制的情况下兼顾所有这些问题:CSS。CSS是一种描述HTML文档样式以及应如何显示HTML元素的语言。但是,主要缺点是CSS不提供适当的Web布局系统,允许开发人员在页面上轻松地位置和对齐元素。或者宁愿没有 - 直到Flexbox和CSS网格即将到来。

万维网联盟(W3C)一直在努力Flexbox自2009年以来和上自2012年以来的CSS网格最终为几乎所有平台提供适当的CSS布局系统,如Android,iOS或桌面。

6 Flexbox和CSS网格的优势

1.促进设计任务

CSS网格和FlexBox均流简化常见的设计任务,例如创建图像库,完美地对齐项目,甚至可以实现整个站点布局。与此同时,他们允许开发人员在相当容易地进行布局,使得能够快速原型设计 - 可用性测试至关重要。在许多情况下,所有这一切都可以在编写更少(和更清晰的)代码时进行,这使得维护和发展更容易和更便宜。

2.提高开发人员的生产力

CSS网格和FlexBox在短期和长期内增加开发者的生产率。在短期内,开发人员可以更轻松地解决问题。在软件开发中,“快速解决betwayapp下载安装方案”通常倾向于纳入令人不快的解决方法,您必须在未来额外的努力支付。这种黑客引入了非直观的代码,随着时间的推移,使布局难以维持和变化。这些黑客最终最终成本和金钱,同时令人沮丧,因为他们更有可能导致布局错误。

但是,Flexbox和CSS网格解决了这个问题。实际上,FlexBox和CSS网格允许开发人员避免必要的“黑客”,以解决CSS的一些严重限制。例如,简单地对准元素垂直地实际上与CSS和所需的Hacks具有许多复杂的代码线非常难以做到。但是,使用FlexBox,这可以只需一两条描述性代码。

3.避免依赖第三方图书馆

在过去几十年中,已经制定了无数图书馆和框架,以帮助克服CSS弱布局系统中的障碍。最受欢迎的框架之一是引导。Bootstrap是一个巨大而强大的框架,可以促进大量任务。但是,它通常主要用于其网格系统,允许开发人员定义元素的尺寸和位置。使用CSS网格,纯CSS网格布局系统,不再需要此步骤。删除对引导依赖性降低了项目复杂性,并避免了额外的努力来定制框架给出的设计。此外,它提高了页面负载速度,因为除了自己的CSS代码之外,用户不再需要加载所有引导码代码。

4.易于学习

Flexbox和CSS网格是强大的工具,也非常易于学习。开发人员可以在一天内学习基本面,并准备在一周内自信和高效地使用它。实际上,我的Flexbox课程CSS网格课程可用Udemy.Udemy for Business.共同包含5-6小时的视频,这些视频涵盖了所有各自的功能。额外的测验和练习练习有助于加强学习,并准备开发人员快速应用这些新技能。

5.未来的技能

学习的小投资Flexbox.CSS网格最终将以多种方式偿还。最重要的是,这些技术是可预见的未来在线布局的主导方法。目前没有由W3C开发的竞争或后续布局系统,但他们正在努力扩展Flexbox和CSS网格的规格。

6.限制

Flexbox可用于生产一段时间。根据Caniuse.com的数据,它现在由全球超过98%的用户提供支持。因此,FlexBox已准备好由公司使用。但是,如果您正在明确开发Internet Explorer,开发人员应该了解已知问题。另一方面,CSS网格目前在2018年3月全球范围内的大约88%的用户提供支持。随后,应根据您的目标组和他们更喜欢的浏览器进行评估。最终,它仍然值得学习技术 - 浏览器支持只会随着CSS网格变得更受欢迎的影响。

Flexbox和CSS网格:2018年#1 Web开发者技能

FlexBox和CSS网格是2018年的#1 Web开发人员技能。这两种新的网络技术都有助于提高新功能和变化的周转时间,因为它们大大简化了许多设计任务。采用Flexbox和CSS网格也将增加开发人员满意度,因为它们会在短期和长期内发现它更容易和更可扩展。最后,对第三方的依赖性有限,这有助于控制项目复杂性,提高页面加载时间,并提高灵活性。

特色课程

Flexbox和CSS网格如何替换CSS浮动?与例子

最后更新于1970年1月

  • 1总时钟
  • 7讲座
  • 各级
4.8 (33)

CSS浮动已经死了!是时候你检查这个视频并了解FlexBox(现在)和CSS网格(未来)。|由Abhilash Pillai.

探索课程

Flexbox学生还学习

赋予你的团队。引领行业。

通过Udemy为Business获取组织的在线课程和数字学习工具库的订阅。

请求演示

Peter Sommerhoff的课程

Kotlin为初学者:使用Kotlin学习编程
Peter Sommerhoff.
4.5 (2,633)
完整的Sass和SCSS课程:从初学者到高级
乔Parys,Peter Sommerhoff,Joe Parys支持
4.4 (2,544)
完整的jQuery课程:从初学者到高级!
乔Parys,Peter Sommerhoff,Joe Parys支持
4.4 (2,646)
畅销书
完整的FlexBox课程:Master CSS3 Flexbox以获得良好
Peter Sommerhoff.
4.6 (1,344)
畅销书
终极CSS网格课程:从初学者到高级
Peter Sommerhoff.
4.6 (515)

Peter Sommerhoff的课程