Flexbox

解决Flexbox跨浏览器兼容Bug

Flexbox是CSS3新增的一个功能特性,对于布局有很大方便之处。但浏览器支持力度各异,而且其规范也还在不断更新之中,也造成很多同学还不敢在实际项目中使用Flexbox的缘故。Philip Walton在他的Github中创建了Flexbugs库,用来回收Flexbox相关的Bug。主要宗旨是收集Flexbox跨浏览器存在的问题和解决方案。目标是让你使用Flexobx构建一个网站能得到你想要的效果,并且能在这里找到相应的解决方案。而这篇文章就是以创建Sticky footer布局为例,介绍了如何解决Flexbox在浏览器兼容的解决方案。

终极Flexbox属性查询列表

Flexbox是CSS3的一个新特性,这个特性可以帮助你实现很多以前实现起来困难的一些效果。比如会让你不会在为浮动感到困惑,不在为水平垂直居中烦恼,不在为自适应布局而感到凝惑。自从Flexbox出现,但也给前端开发人员带很语法版本的困惑,在整个发展过程中经历了三个不同的语法版本,造成前端开发人员不知道怎么使用,今天根据的《THE ULTIMATE FLEXBOX CHEAT SHEET》文章整理了一份Flexbox使用查询列表清单。希望对初学者有所帮助。

Hold住CSS布局新属性

新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志。按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作。然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了。

主流的浏览器,在W3C的推动下,已经开始实现多种新型的布局方式,而且我们现在已经可以开始使用了。举个例子,W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

CSS布局的未来

大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的。这是一篇关于css布局且具有前瞻性的 文章。在这里,我能够保证在数年之后,css3必定能够引领潮流。在这篇文章当中,我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具,也许在这些阶段中你不一定用得到他们,(至少不是现在),但仍然还很有必要去了解,通过这样可以透过迷雾,看清未来。

Flexbox制作CSS布局易如反掌

伸缩盒模型(flexbox)是一个新的盒子模型,主要优化了UI布局。作为实际布局的第一个CSS模块(浮动真的应该主要用来制作文本围绕图片这样的效果),它使很多任务容易多。Flexbox的功能主要包手:简单使用一个元素居中(包括水平垂直居中),可以让扩大和收缩元素来填充容器的可利用空间,可以改变源码顺序独立布局,以及还有其他的一些功能。Flexbox一直都存在。它最开始作为Mozilla XUL的一个功能,被用来制作程序界面,如Firefox的工具栏,就多次使用这个属性。该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持。然而有一些事项需要注意。在IE中规范更改了他的语法,因此你将需要使用一个稍微不同的语法。Chrome当前版本仍然需要添加前缀“-webkit-”,而Firefox和Safari仍然还在使用最老版本的语法。Firefox已经更新为最新的规范,但是,在实际项目中目前最好还先别使用最新的规范,直到它被认为没有bug了或者更稳定了,在使用。在这之前,Firefox还是使用最老的语法规范。根据的《Designing CSS Layouts With Flexbox Is As Easy As Pie》所译,再次向大家介绍了Flexbox的使用,以及罗列出Flexbox布局模块在各规范下的属性对比。

IE10中的Flexible Box("Flexbox")布局

经过这一系列对Flexbox的介绍,我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来,虽然Flexbox功能强大(特别是弹性布局),但还是很多同学不敢使用,也不想尝试性使用。我想主要原因出于他的语法版本众多,浏览器对其兼容性等。在《“老”的Flexbox和“新”的Flexbox》一文中,让我们了解了如何识别Flexbox的语法版本,而在《使用Flexbox:新旧语法混用实现最佳浏览器兼容》和《跨浏览器的Flexbox》能实现浏览器的完美兼容性。既然有方案能让Flexbox布局模块在众多浏览器下实现兼容,那我们今天要说什么呢?从浏览器的兼容性中可以看出,Flexbox布局模块的最新语法“display:flex”在Chrom25.0+、Opera12.1,Firefox22+、IE11+都得到了支持,但我们还有很多用户并不像我们这些前端人员会及时更新自己所用浏览器的版本。那么就存在Flexbox的兼容性问题。说了一大堆的废话,还未进来主题,真有点对不住读者,接下来也不浪费大家宝贵时间,我们一起进入今天的主题——IE10中的Flexible Box("Flexbox")布局

一个完整的Flexbox指南

Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。最重要的是,Flexbox布局方向不可预知,他不像常规的布局(块就是从上到下,内联就从左到右)。而那些常规的适合页面布局,但对于支持大型或者杂的应用程序(特别是当他涉及到取向改变、缩放、拉伸和收缩等)就缺乏灵活性。根据Chris Coyier的《A Complete Guide to Flexbox》所译,再次向大家系统介绍了Flexbox模块中的各个术语,以及属性、属性参数所起的作用,并附上几个简单的实例与大家理论与实战相结合,实打实的了解清楚Flexbo模块。

使用Flexbox:新旧语法混用实现最佳浏览器兼容

Flexbox用于布局真是强大,前面在《使用CSS3 Flexbox布局》和《Flexbox——快速布局》介绍了使用Flexbox制作布局,而且使用Flexbox还可以快速的实现响应式布局:《响应式设计的未来——flexbox》。可是大家看到Flexbox具有多个版本的语法规则,而且还受限于浏览器支持度,都不敢轻意尝试使用。其实早在《跨浏览器的Flexbox》一文中已做过各浏览器兼容处理的介绍。今天通过一个三列网格布局的案例,再一次向大家介绍如何使用Flexbox的旧语法、过渡语法和新语法混合使用,实现Flexbox在各浏览器下的最佳兼容。感兴趣的同学不仿自己动手一试。

“老”的Flexbox和“新”的Flexbox

大家都清楚的知道:“Flexbox”(全称:CSS Flexible Box Layout Module)在过去的三年中经历了许多变化。2009年最早出现在规范中的版本可称得上老版本"display:box",随后在2011年出现的中间过渡版本“display:flexbox”,而在2013年又发布了最新的语法规范“display:flex”。一个Flexbox有这么多个不同语法版本,无疑是给我们的学习带来很大的难度。在使用搜索引擎查找flexbox的时候会出现大量的教程,此时我们都不知道哪个是最新版本,哪个是老版本,哪个又是过渡版本。为了能更好的学习flexbox相关的知识。Chris Coyier在《“Old” Flexbox and “New” Flexbox》一文中告诉我们怎么来分辨Flexbox的语法版本区别,如何通过相关的教程去学习Flexbox属性的使用。如果你和我一样分不清楚Flexbox众多语法版本如何区别?强烈建议你花几分钟阅读一下这篇译文,我想你会有所收获的。

使用CSS3 Flexbox布局

Flexbox是CSS3的一个新模块,主要用于实现弹性布局,这个属性给我们布局带来极大的方便与简易。随着Flexbox新语法的落定,现代主流浏览器也紧跟其后,都在慢慢支持这个属性。而有关于Flexbox的教程,在W3cplus站上已经分享了很多篇,从理论知识到实例,从各个方面阐述了Flexbox的功能与特性以及其使用方法。根据Helen Emerson的《Using the CSS3 flexbox layout》所译,详细向大家介绍了如何使用Flexbox属性创建一个典型的三列布局,希望大家能从这个简单的实例教程中更进一步的了解Flexbox的特性与使用方法。

页面

返回顶部