CSS3 Flexbox解决方案
长期以来,CSS 一直缺乏合适的布局机制。 变形,动画,滤镜,对这门伟大的语言来说都很有用的补充的,但是都没有解决 Web 开发人员一直抱怨的的主要的看起来似乎是永恒的问题。
终于,感谢Flexbox ,我们有了一个解决方案。查看说明、DEMO及项目源代码:Flexbox解决方案
这个网站不是另一个CSS框架。相反,它的目的是展示曾经很困难甚至无法单独使用 CSS 能解决的问题,而现在使用Flexbox简单易用。随着最近发布的Internet Explorer 11和Safari 6.1,最新的Flexbox规格已经被每一个的现代浏览器支持(愚人码头注:浏览器的支持请客,你可以看 http://caniuse.com/#feat=flexbox)。
在Web检查器(天涯孤雁注:开发者工具)中查看样式或深入了解 源代码,看看Flexbox成为主流后CSS布局会变得多么容易。
这个解决方案主要提供了以下几个应用:
更好,更简单的栅格系统Flexbox: 满足了我们大部分对于栅格系统的需求。并且尺寸、对齐仅用一两个属性就能搞定。
圣杯布局:这是一个经典的 css-hack 布局挑战,历史上出现的方案都没有完美解决。直到 Flexbox 布局的出现,终于成为可能。
输入附加组件:创建全宽度,流式的输入/按钮组在 CSS 的历史中几乎不可能。有了 Flexbox 布局,一切将会变得更简单。
媒体对象:创建含有固定或变化的头像的媒体对象,不用担心溢出(overflow),清除浮动(clearfixing),或者块格式化内容(block formatting context)等 hack 。
粘性页脚:让你的页脚粘在底部一直以来是一个技巧。如果页脚的高度未知,那么基本上就不可能了。现在不再如此。
垂直居中:这个经典的问题问题一直被 CSS hackers 挑战了很多年,历史的解决方案没有一个能够完整地解决。有了 Flexbox 布局,终于成为了可能。
建议继续学习:
- CSS3入门——由点到面 (阅读:3690)
- CSS3 媒介判断与 iPhone 4 视网膜显示屏 (阅读:2723)
- 用css3写个logo (阅读:2582)
- 闲谈CSS3动画 (阅读:2637)
- 用 CSS3 Transitions 实现动画 (阅读:2347)
- 理解CSS3线性渐变 (阅读:2296)
- CSS3开发工具收集 (阅读:2256)
- CSS3 appearance简介 (阅读:2264)
- CSS3常用功能的写法 (阅读:2194)
- 揭秘HTML5和CSS3【珍珠奶茶帮】 (阅读:2107)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:天涯孤雁 来源: WEB前端开发
- 标签: css3 flexbox
- 发布时间:2016-11-06 22:37:20
- [66] Oracle MTS模式下 进程地址与会话信
- [66] Go Reflect 性能
- [65] 如何拿下简短的域名
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则