微信号:CoderRes

介绍:最新鲜的程序员技术文档及相关资源

学习 Flexbox 的 18 个优质资源

2016-02-19 12:04 Specs

大家都在谈论的 “flexbox” 是什么? Flexbox 能解决什么问题?现在你可以在你的项目中使用 Flexbox 吗?这些指南、教程、工具会告诉你有关 Flexbox 你需要了解的内容。


1. Learn CSS Layout: Flexbox — Flexbox 布局模型简要概述。


地址:http://learnlayout.com/flexbox.html


2. Solved by Flexbox — 传统 CSS 布局很难实现,但用 Flexbox 却很简单的一些展示。


地址:https://philipwalton.github.io/solved-by-flexbox/


3. Can I use… Flexbox — 目前 94.57% 的浏览器都可以渲染 Flexbox 布局。


地址:http://caniuse.com/#feat=flexbox


4. Flexbox in the Real World — 目前可以实施 Flexbox 的策略和工具。


地址:http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/


5. A Complete Guide to Flexbox — CSS-Tricks 中关于 Flexbox 的一个完全指南。


地址:https://css-tricks.com/snippets/css/a-guide-to-flexbox/


6. Flexbox Codrops CSS Reference — 包含很多演示的详细参考指南。


地址:http://tympanus.net/codrops/css_reference/flexbox/


7. What The Flexbox?! — 免费的视频教程,会发送到你的邮箱。


地址:http://flexbox.io/#/


8. flexbox in 5 minutes — Flexbox 特性及 CSS 属性的互动教程。


地址:http://flexboxin5.com/


9. Using CSS flexible boxes — “很多开发者会发现 Flexbox 会更容易使用”,根据 Mozilla Developer Network 开发者指南。


地址:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes


10. CSS Flexible Box Layout Module Level 1 — 最新的关于 Flexbox 的 W3C 技能标准。


地址:http://www.w3.org/TR/css-flexbox-1/


11. Flexbox — Fast Track to Layout Nirvana? — Dev.Opera 对于 Flexbox 的介绍。


地址:https://dev.opera.com/articles/flexbox-basics/


12. The Ultimate Flexbox Cheat Sheet — 在流行的布局设计模式中如何使用 Flexbox。


地址:http://www.sketchingwithcss.com/samplechapter/cheatsheet.html


13. Flexbox Adventures — Flexbox CSS 属性的互动指南


地址:http://chriswrightdesign.com/experiments/flexbox-adventures/


14. Building With Flexbox — 使用 Flexbox 解决传统 CSS 布局问题的例子。


地址:http://callmenick.com/post/flexbox-examples


15. Flexplorer — 通过这个互动工具学习 Flexbox 属性是如果影响页面布局的。


地址:http://bennettfeely.com/flexplorer/


16. Flexy Boxes — 探索 Flexbox 的互动游乐场。


地址:http://the-echoplex.net/flexyboxes/


17. CSS Flexbox Please! — 可以用于测试和实验的交互演示。


地址:http://demo.agektmr.com/flexbox/


18. CSS Flexbox — Flexbox 文章、提示、资源的一个集合。


地址:http://cssflexbox.com/


英文原文:http://sixrevisions.com/css/learn-flexbox/

译文:http://webres.wang/18-resources-to-learn-flexbox/

转载请注明来源

 
程序员资源 更多文章 感谢关注程序员资源公众号 [干货] WEB开发者应该有哪些必备的技能? 程序员应该坚决避免的10种编程坏毛病 GitHub上整理的一些实用工具 据说程序员写完代码是这个样子,99%的人都中枪了
猜您喜欢 京东三级列表页持续架构优化—前端优化实践 iOS基础入门(一) 如何姿势正确地开始一个Android项目 11张爆笑图诠释程序员的心声 前端编码风格规范之 HTML 规范