Flexbox

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的特性与使用方法。

响应式设计的未来——Flexbox

响应式设计对于2013年的Web前端人员来说并不是一个新名词,现在国内外有关于响应式设计的教程也是铺天盖地,小站也也分享了一些响应式设计的教程。那么大家有没有思考过响应式设计的未来将会是一个什么样?或者说,特别是CSS3的Flexbox广泛得到支持的情况下会有什么革命性的变化呢?如果您还没有对这个问题进行任何的思考之前,你又想了解一下这方面的变更,不仿花点时间阅读一下这篇文章。本文根据Ben Gremillion的《Responsive Design of the Future with Flexbox》所译,向大家初步的介绍了一下FlexboxMedia Queries结合制作响应式设计带来的变化。简单的了解一下Flexbox哪些属性会给响应式设计带来革命性的变更。整篇文章简单明了,以一个简单案例的形式向大家展开,不过原作者写的有点过早,如果现在我们自己去做的话,可以在这个基础上做一定的修整,将会变得更加简单与强大,你愿意动一试吗?如果愿意的话就看完文章后动手一试。我想你会找到你需要的东东。

看看接下来会发生什么:CSS3 Flexible Boxes

设计一个网站,布局可能是最生要的元素之一。当你网站的用户理解你的布局和喜欢上你的网站布局,他们用起来很开心,这样用户会在你的站点呆的时间更长,甚至会定期访问你的网站。我们通过导航能浏览一些高质量的内容,但由于网站混乱的设计和完全乱套的布局,我们第一反应,那就是尽可能快的离开这个网站。特别是如今天显示屏幕的多样化,在使用以前老的布局方案无法实现。虽然响应式布局能改变这种状况,但是需要添加很多样式代码,增加维护难度与开发速度。值得庆幸的是,CSS3给我们带来了一个Flexible Boxes模块,让我们布局变得更加和简易化。根据的《A Look at What’s Coming Up: CSS3 Flexible Boxes》一文,给大家介绍了一个使用Flexbox实现的一个响应式网站布局的案例,希望这个案例能帮助大家更好的理解Flexbox,从而更好、更快的实现网站布局。

跨浏览器的Flexbox

自从2009年至今Flexbox已出现好几个版本,这也造成了Flexbox没有得到其最大功能的发展与普遍性的运用与推广,幸运的是今年推出了最新的语法规则,而且几大主流浏览器都已支持最新语法规则,也就是说将来我们可以很好的使用Flexbox属性了。可是目前兼容如果需要使用Flexbox属性来制作一些效果,我们还是需要考虑一下如何做到最完美的兼容各浏览器。今天 根据的《Advanced cross-browser flexbox》所译,根据写的一个示例为主线,一层一层剖析了如何让各浏览器能最完美的兼容Flexbox的属性使用。如果你感兴趣就继续 往下看吧。

Flexbox——快速布局神器

在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮动或者其他方法来实现这个目的,而其中出现的bug和浏览器的差异性使用对布局失去兴趣。为了应对这种情况,CSS3包含了许多模块,使用不同的布局更加容易。我们已经在其他文章中看到多栏布局媒体生成的内容分页,现在我们将注意力转向CSS3的 Flexbox布局模块。今天根据的《Flexbox — fast track to layout nirvana?》一文所译,向大家介绍Flexbox这一布局神器,希望大家喜欢。

页面

返回顶部