MyException - 我的异常网
当前位置:我的异常网» Flex » 深入懂得 Flexbox 伸缩盒模型

深入懂得 Flexbox 伸缩盒模型

www.MyException.Cn  网友分享于:2015-02-06  浏览:0次
深入了解 Flexbox 伸缩盒模型

http://c7sky.com/dive-into-flexbox.html

介绍

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的,不妨仔细了解下吧!

 

为什么需要伸缩布局盒(Flexbox)?

作者长期以来使用表格、浮动、行内块元素和其他 CSS 属性来布局网站内容。然而,这些并不是为复杂的页面和网页应用而设计的。不管是简单的垂直居中,还是灵活的网格布局都很难靠一己之力轻易实现,因此成就了 CSS 网格框架。但是,如果真的需要那么多项目来实现做这些事,为什么不让它来的更简单些呢?Flexbox 的目的就是改变这一切。

规范状态和浏览器支持情况

Flexbox 规范的相关工作已经进展了3年。不同的浏览器也实现了不同的实验版本。在2012年9月,Flexbox 语法的第三个主要修订版本进入到候选推荐阶段。这意味着 W3C 认为当前的语法是稳定的,并鼓励浏览器开发商去实现它。

Flexbox 规范时间表:

  • 2009年7月 工作草案 (display: box;)
  • 2011年3月 工作草案 (display: flexbox;)
  • 2011年11月 工作草案 (display: flexbox;)
  • 2012年3月 工作草案 (display: flexbox;)
  • 2012年6月 工作草案 (display: flex;)
  • 2012年9月 候选推荐 (display: flex;)

Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已经支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就会实现。我推荐大家使用已经支持的浏览器来阅读本文和查看例子。

概念和术语

虽然现在我们可以使用 Flexbox 轻松创建布局,而不会像以前那样难以理解,但我们仍然需要花一些时间去熟悉到底如何使用 Flexbox。新的术语和概念可能会是我们使用 Flexbox 时的一个障碍,所以让我们先来了解以下它们。

Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

这里的示例创建了一个伸缩容器。

 

本文中所有的示例都会带有相应的浏览器厂商前缀。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

Flex Lines 伸缩行

伸缩项目沿着伸缩容器内的一个 伸缩行 定位。通常每个伸缩容器只有一个伸缩行。

这个示例展示了2个项目在默认情况下的定位:沿着一个水平伸缩行从左至右显示。

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/wcXRk/5/embedded/result,html,css/" frameborder="0"></iframe>

Writing Modes 书写模式

在你设计 Flexbox 时的有一个重要的部分是更改伸缩行的方向。默认情况下,伸缩行和文本方向一致:从左至右,从上往下。

这是 W3C 关于一个名为书写模式的新特性工作草稿。书写模式是一个新的方法,让你可以从右往左写,甚至竖着写,就像你知道的某些语言一样。

书写模式是一个正在进行的计划,但是 Chrome 已经率先支持了 direction CSS 属性。如果我们在上一个例子中设置方向为 rtl (从右往左) 那么不仅仅文字会从右往左书写,而且 伸缩行也改变了方向,并更改了页面的布局。

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/cNuzn/3/embedded/result,html,css/" frameborder="0"></iframe>

这也许就是 Flexbox 为什么如此抽象难懂的地方。当你正在制作一个语言不确定的页面时你不能简单的只是说“上”、“下”、“左”、“右”。

The Main Axis and the Cross Axis 主轴和侧轴

为了描述抽象的书写模式,Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。

起点、终点和各轴的方向的名称如下:

  • 主轴起点 Main Start
  • 主轴终点 Main End
  • 主轴方向 Main Direction (有时候也成为伸缩流方向 Flow Direction)
  • 侧轴起点 Cross Start
  • 侧轴终点 Cross End
  • 侧轴方向 Cross Direction

在继续了解之前明白主轴和侧轴是至关重要的。Flexbox 中的一切都和这些轴有关。在我们所有的例子中,书写模式都是从左至右,从上到下,但是你需要记住并不是所有的 Flexbox 都是这样的。

伸缩容器的属性

flex-direction 伸缩流的方向

flex-direction 允许你更改伸缩容器的主轴方向。flex-direction 的默认值是 row。该值表示伸缩项目根据书写模式的方向布局。再次提醒,默认是从左至右,从上到下。其他的值如下:

  • row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从右往左显示。
  • column: 主轴和侧轴交换。如果书写系统是垂直的,那么伸缩项目也是垂直显示的。
  • column-reverse: 和 column 一样,但是方向相反。

让我们把前一个示例中的 flex-direction 改为 column

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/ZvBre/3/embedded/result,html,css/" frameborder="0"></iframe>

现在我们的伸缩项目就是垂直显示的了。

justify-content 主轴对齐

伸缩容器的 justify-content 属性用于调整主轴上伸缩项目的位置。可能的值为:

  • flex-start (默认)
  • flex-end
  • center
  • space-between
  • space-around

这里我们设置 justify-content 为 center 让伸缩项目在主轴上居中对齐:

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/x9Pa8/4/embedded/result,html,css/" frameborder="0"></iframe>

flex-startflex-end, 和 center 一看就懂。space-between 和 space-around 则是分配伸缩项目之间空白空间的不同方法。这张规范中的图示很好的解释了一切:

align-items 侧轴对齐

align-items 是一个和 justify-content 相呼应的属性。align-items 调整伸缩项目在侧轴上的定位方式。可能的值有:

  • flex-start (默认)
  • flex-end
  • center
  • baseline
  • stretch

这里我们设置 align-items 为 center 让伸缩项目在侧轴上居中对齐:

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/dFz5U/2/embedded/result,html,css/" frameborder="0"></iframe>

和之前一样,flex-startflex-end, 和 center 的意义显而易见。stretch 也很简单:它会将伸缩项目从侧轴起点拉伸到侧轴终点。baseline 则是让伸缩项目与它们的基线对齐。基线根据伸缩项目的内容计算得到。下面这张来自W3C标准的图例很好的解释了这些属性:

flex-wrap 伸缩行换行

目前为止,每个伸缩容器都有且只有一个伸缩行。使用 flex-wrap 你可以为伸缩容器创建多个伸缩行。这个属性接受以下值:

  • nowrap (默认)
  • wrap
  • wrap-reverse

如果 flex-wrap 设置为 wrap,在一个伸缩行容不下所有伸缩项目时,伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。

我们使用 flex-wrap 来看个例子:

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/VAuXx/5/embedded/result,html,css/" frameborder="0"></iframe>

wrap-reverse 和 wrap 一样,只是新的伸缩行会被添加到侧轴的反方向上。

align-content 堆栈伸缩行

align-content 会更改 flex-wrap 的行为。它和 align-items 相似,但是不是对齐伸缩项目,它对齐的是伸缩行。可能你已经想到了,它接受的值也很相似:

  • stretch (默认)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

这些值与 justify-content 和 align-items 中的值一样。

在这个例子中,我们设置 align-content 为 center

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/MuYZ3/3/embedded/result,html,css/" frameborder="0"></iframe>

flex-flow 伸缩方向与换行

flex-flow 是 flex-direction 和 flex-wrap 的缩写。

flex-flow: [flex-direction] [flex-wrap]

举个例子:

 

伸缩项目的属性

一个伸缩项目是一个伸缩容器的子元素。伸缩容器中的文本也被视为一个伸缩项目。

伸缩项目中内容与普通流一样。举例来说,当一个伸缩项目被设置为浮动,你依然可以在这个伸缩项目中放置一个浮动元素。

伸缩项目都有一个 主轴长度(Main Size) 和一个 侧轴长度(Cross Size)。主轴长度是伸缩项目在主轴上的尺寸。侧轴长度是伸缩项目在侧轴上的尺寸。或者说,一个伸缩项目的宽或高取决于伸缩容器的轴,可能就是它的主轴长度或侧轴长度。

下面的属性可以调整伸缩项目的行为:

order 显示顺序

order 是最简单明了的属性。设置伸缩项目的 order 可以调整它们渲染时的顺序。在这个例子中,我们设置其中一个伸缩项目的 order 为 -1,于是它被提前到了其他伸缩项目的最前面。

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/zpdLD/4/embedded/result,html,css/" frameborder="0"></iframe>

如果需要文档顺序和显示顺序不同时,这就是个很有用的功能了。

margin 外边距

你应该对 margin: auto; 的这种用法很熟悉。在伸缩盒中,它也能做同样的事情,但是更加强大。一个 "auto" 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。

这里我们在第一个伸缩项目上声明了 margin-right: auto;,导致了所有的剩余空间被合并到那个元素的右边去了:

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/sQAFY/2/embedded/result,html,css/" frameborder="0"></iframe>

这里我们使用 margin: auto; 来重现经典CSS布局中的圣杯:真·垂直居中:

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/vTCk3/2/embedded/result,html,css/" frameborder="0"></iframe>

align-self 侧轴对齐

伸缩项目的 align-self 属性会覆盖该项目的伸缩容器的 align-items 属性。它的值和 align-items一样:

  • stretch (默认)
  • flex-start
  • flex-end
  • center
  • baseline

在这个例子中我们为每个伸缩项目应用了不同的 align-self 值:

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/REtEG/2/embedded/result,html,css/" frameborder="0"></iframe>

我在例子中包含了2个基线对齐的伸缩项目,因为它们的对齐需要互相作用。

flex 伸缩性

现在我们终于要开始设置伸缩盒的伸缩性了。flex 指定了一个伸缩项目该如何分配主轴上的剩余空间。

让我们一次把所有的常见值都看一遍吧。

flex: [number]

这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例。

在这个例子中,第一个伸缩项目占用了 2/4 的剩余空间,而另外两个各占用了 1/4 的剩余空间。

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/s3jtA/3/embedded/result,html,css/" frameborder="0"></iframe>

如果把每个伸缩项目都设置为 1 的话,那么剩余空间就会被平均分配了。

<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/BYqUV/3/embedded/result,html,css/" frameborder="0"></iframe>

flex: initial

一个 flex 属性值被设为 initial 的伸缩项目,在有剩余空间的情况下不会有任何变化,但是在必要的情况下会被收缩。

flex: auto

一个 flex 属性值被设为 auto 的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间。

auto 目前仅在 Opera 12.11 尚有效,在 Chrome 23.0.1271.95 上无效。你可以通过使用 flex: 1; 来达到一样的效果。

flex: none

一个 flex 属性值被设为 none 的伸缩项目,在任何情况都不会发生伸缩。

flex 缩写

flex 也可以把 flex-growflex-shrink, 和 flex-basis 这3个缩写为1个声明:

flex: [flex-grow] [flex-shrink] [flex-basis]

大多数情况下没必要使用这种语法。另外,它需要一个更容易理解的伸缩算法。如果你觉得自己挺厉害的,到规范里看一下吧。

当然你也可以将 flex-growflex-shrink, 和 flex-basis 作为单个属性分开来设置。但我强烈反对这种方式:当使用 flex 缩写时,即使没有某些值没有设置也能获得更合理的默认值。

visibility 叠加项目

当该值生效时,应用 visibility: collapse; 和 visibility: hidden; 与 display: none; 的效果是不一样的。如果是 collapse,该元素会影响伸缩容器的侧轴长度,但不会被现实或占用主轴的空间。如果你想动态添加或移除伸缩项目又不会影响伸缩容器的侧轴长度,这将会非常有用。

目前为止,visibility: collapse; 还没有被让任何浏览器正确的实现。现在 visibility: collapse; 还和 visibility: hidden; 实现着一样的效果。我希望能尽快得到改观。

你可以在 这里 看到 collapse 应该是如何工作的。

总结

如你所见,伸缩布局盒(Flexbox) 是一个强大的新型布局模式,将会给网站带来革命性的布局方法,但它也需要一种全新的思考方式。希望这篇文章能为你使用伸缩布局盒构建网站带来帮助。我不知道你怎么想,但是在我看来未来是美好的。

原文:Dive into Flexbox (http://weblog.bocoup.com/dive-into-flexbox)
参考资料:Css3-flexbox (http://www.w3.org/html/ig/zh/wiki/Css3-flexbox)

原创翻译,转载请注明出处:[译]深入了解 Flexbox 伸缩盒模型

 

文章评论

2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员必看的十大电影
程序员必看的十大电影
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
10个调试和排错的小建议
10个调试和排错的小建议
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
中美印日四国程序员比较
中美印日四国程序员比较
一个程序员的时间管理
一个程序员的时间管理
我的丈夫是个程序员
我的丈夫是个程序员
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
 程序员的样子
程序员的样子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
如何成为一名黑客
如何成为一名黑客
漫画:程序员的工作
漫画:程序员的工作
程序员都该阅读的书
程序员都该阅读的书
旅行,写作,编程
旅行,写作,编程
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的鄙视链
程序员的鄙视链
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
总结2014中国互联网十大段子
总结2014中国互联网十大段子
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
那些争议最大的编程观点
那些争议最大的编程观点
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
鲜为人知的编程真相
鲜为人知的编程真相
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
老程序员的下场
老程序员的下场
每天工作4小时的程序员
每天工作4小时的程序员
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
我是如何打败拖延症的
我是如何打败拖延症的
代码女神横空出世
代码女神横空出世
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有