简介

我可以肯定,您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是,CSS 还缺少适用于此任务的合适机制。了解 CSS3 弹性方框模型(简称 Flexbox

草案将 Flexbox 描述如下:

[...]针对接口设计而优化的 CSS 框模型。除了 CSS 中已有的布局系统之外,该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中,框的子代采用水平或垂直布局,而且可将未使用的空间分配给特定的子代,或者通过“弹性”分配给应展开的子代,在各子代间进行分配。这些框的嵌套(水平嵌套在垂直中,或垂直嵌套在水平中)可用于在两个维度中构建布局。该模型是以 XUL用户界面语言的模型为基础的,适用于多种基于 Mozilla 应用程序(例如 Firefox)的用户界面。

太棒了。对于您这样的开发人员,哦不对,是布局架构师™来说,这意味着什么呢?

  1. 浮动?说啥呢,我们可不需要浮动。
  2. 以前具有挑战性的布局是更直观的。
  3. 我们可以创建真正具有弹性的布局,而浏览器将替我们完成计算工作。

Flexbox 为 display 属性赋予了一个新的值(即 box 值),还为我们提供了 8 个新的属性:

  • box-orient
  • box-pack
  • box-align
  • box-flex
  • box-flex-group
  • box-ordinal-group
  • box-direction
  • box-lines

8 个新属性啊?没错,是不是觉得太多了?那好,我们来分别介绍一下。

常用 Flexbox 样式属性

用于框的样式

display: box
该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。
box-orient
值:horizontal | vertical | inherit
框的子代是如何排列的?还有两个值:inline-axis(真正的默认值)和block-axis,但是它们分别映射到水平和垂直方向。
box-pack
值:start end | center | justify
设置沿 box-orient 轴的框排列方式。因此,如果 box-orient 是水平方向,就会选择框的子代的水平排列方式,反之亦然。
box-align
值:start | end | center | baseline | stretch
基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的,该属性就会决定垂直排列,反之亦然。

用于框的子代的样式

box-flex
值:0 | 任意整数
该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0,也就是不具有弹性。

上面的 box-flex-groupbox-ordinal-groupbox-direction 和 box-lines属性我就不介绍了,因为老实说,您的大部分 Flexbox 作品都未必会用到这些。如果您在使用中想了解这些属性,请访问摘要中的链接。

关于语法的说明:目前,要在 Webkit 和 Gecko 中实施 Flexbox,就必须使用供应商前缀。在本教程中,为了清晰起见,我略去了大部分此类内容。有关详情,请参阅浏览器支持部分。

什么是弹性?

box-flex 样式属性定义了 Flexbox 的子代是弹性还是非弹性的,并且有助于定义该子代相对其同级的弹性比。我们来演示一下这究竟是什么意思。首先,我们从 3 个框开始。

<divid="flexbox"><p>child 1</p><p>child 2</p><p>child 3</p></div>

现在,我们要将它们水平相邻排列,而且无论其中的内容如何都要始终保持同样的高度。目前您会怎样处理这个问题?大部分人可能不假思索地就浮动这些段落,也许向父代添加 overflow:hidden; 以便清除浮动定位。没什么特别的招数。但是利用 Flexbox,我们就能轻松实现同样的目的。

#flexbox {
display: box;
box-orient: horizontal;}

在上面的代码中,我们只需告知父代根据此 Flexbox 模型进行操作,并沿水平轴排列其所有子代。不用任何浮动。好耶!

子代的宽度仍保留指定值(或者在未指定的情况下保留其固有宽度)。这意味着如果所有子代的总宽度小于父代的总宽度,我们就会得到这样的效果:

默认情况下,Flexbox 的子代仍为非弹性。这可能看起来有点奇怪,但是这样就使得子代有机会加入弹性体验。但是如果您希望第一和第二个子代具有特定宽度,而第三个子代根据父代中的可用空间自行调整宽度,那要怎么做呢?这种情况下就轮到 Flexbox 大显身手了:

#flexbox {
display: box;
box-orient: horizontal;}#flexbox > p:nth-child(3) {
box-flex:1;}

我们将最后一个子代设为弹性的,以占据可用空间。由于我们只对一个元素分配了空间,它将占据所有可用空间。

请注意,该元素只有在框的轴向上是具有弹性的;在本例中,也就是在水平方向上具有弹性。

box-flex 的值是相对值。因此,如果我们将第二和第三个子代设为弹性的:

#flexbox {
display: box;
box-orient: horizontal;}#flexbox > p:nth-child(2),#flexbox > p:nth-child(3) {
box-flex:1;}

它们将各占据同样大小的可用空间,实际上就是平分了可用空间。

现在,我们也可以将 3 个子代的 box-flex 分别设为 12 和 3,然后它们就会按照这样的比例吸收其父代的多余空间。让我们实际操作看看。

基本示例

查看下面的代码和结果:

悬停在某个框上,查看弹性框的实际效果:当悬停目标展开时,其余的框就会缩小,但是总宽度始终和父代框的大小保持一致。

此处采用的样式其实只有两种:display: box 将内容转为 Flexbox 模式,然后子代的 box-flex: 1 在弹性模式下运行这些内容,从而占据所有额外空间。默认方向为水平,因此 box-orient: horizontal 其实并不是必需的,但是为了表达清晰和便于维护,最好还是加上。默认的 box-align 是弹性的,因此这些 div 占据了其父代框的整个高度。还不错吧?您可以在拉斐尔·戈特 (Raphael Goetter) 制作的这一演示中了解此技术在导航中的应用。

让我们更深入一些。

中央舞台:居中定位

在 CSS 中,将对象在水平和垂直方向上的居中一直以来都是个挑战。在仅限 CSS 的前提下,我们能拿出的最佳解决方案就是 position:absolute; left: 50%; top: 50%; 与等于一半宽度/高度的负左侧/顶部边距相结合。而这只能搭配大小确定的元素。啊!

詹姆斯·约翰·马尔科姆 (James John Malcom) 写道,有一种方法可以根据至少有 6 年历史的 display:table-cell;(杜桑·亚诺夫斯基 (Dušan Janovský) 曾在 2004 年写过)来垂直对齐。詹姆斯在此记录了完整的水平和垂直解决方案。此方案甚至不需要大小确定的元素即可生效。

借助 Flexbox,我们可以更轻松地实现这一点:

我们并不在子代上设置 box-flex,因为我们不希望它使用额外空间。我们只希望它无论大小如何都居中。这样做的一大优势在于,我们无需知道明确的尺寸即可将其居中。通常,我们可以使用块或内联对象来完成此操作。就是这么好用。

浏览器支持

那么您现在就能在工作中使用弹性框模型吗?还不行,至少不是对所有浏览器都有效。目前,我们尚未在 IE9 或 Opera 10.60 中实现 Flexbox,但是它曾在 IE9 Platform 的某个预览中出现过,因此微软有可能在未来某个时间添加此功能。

Caniuse.com 列出了当前支持的浏览器,即 Firefox 3 及更高版本、Safari 3 及更高版本以及 Chrome 浏览器。如果您要开发的是移动 Webkit,那么 Flexbox 将是标准布局方案的绝佳替代品。

当然,所有这些仍处于实验阶段,因此您还是应该使用供应商前缀:

/* i wish it was as easy as this: */

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
/* but in reality you'll need to do this: */

display:-webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;

display:-moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;

如果您觉得这牵涉到很多分类,艾利克斯·拉塞尔 (Alex Russell) 将所有这些选项归纳成了一些实用的帮助类别

摘要

即使不考虑其他 4 个属性,也已经存在了很多可能性。要进一步了解 Flexbox,请参阅 Isotoma 的 Flexbox 演示和 Mozilla Hacks 上关于 Flexbox 的帖子W3C Flexbox 规范。开始动手设计些布局吧。尽情体验吧!

弹性方框模型 (Flexible Box Model) 快速入门的更多相关文章

  1. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  2. CSS的盒子模型(Box Model)

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

  3. CSS:CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  4. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  5. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  6. 弹性盒模型 flex box

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...

  7. CSS3弹性盒模型flex box快速入门 2016.03.16

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  8. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  9. CSS盒子模型(Box Model)

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

随机推荐

  1. lr回放Warning -26601报错的解决方法

    问题现象: Action2.c(30): Error -26601: Decompression function  (wgzMemDecompressBuffer) failed, return c ...

  2. 洛谷P2296 寻找道路 [拓扑排序,最短路]

    题目传送门 寻找道路 题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 .路径上的所有点的出边所指向的点都直接或间接与终点 ...

  3. 图形管线之旅 Part3

    原文:<A trip through the Graphics Pipeline 2011> 翻译:往昔之剑   转载请注明出处   此时,我们一路上通过多个驱动层和命令处理器将draw ...

  4. redux 初步理解

    派发一个 action 给 reducer, reducer 生成了一个新的 state; redux 通过 Store 来保存数据, store.getState 获得数据, 而要更新 state, ...

  5. 【UOJ 80】 二分图最大权匹配

    [分析] 之前打的那种KM会TLE... why??明明说n^3的啊? #include<cstdio> #include<cstdlib> #include<cstri ...

  6. [NOI2007]货币兑换 --- DP + 斜率优化(CDQ分治)

    [NOI2007]货币兑换 题目描述: 小 Y 最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A 纪念券(以下简称 A 券)和 B 纪念券(以下简称 B 券). 每个持有金券的顾客都有一个 ...

  7. 把json格式的字符串转换成javascript对象或数组

      第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ...

  8. 用rem设置文字大小

    一.px与em 用px设置文字大小是再正常不过的事情,比如 html {font-size: 12px;} 随处可见的在设置width.height使用px,这也是细致稳妥的设置方法,这样做的缺点在于 ...

  9. Linux下swap分区多大才合适的问题探讨

    说明: 1.这个话题在每个Linux发行版中都各不相同,且在当下内存硬盘的时代下,再组个磁盘阵列之后速度相当. 2.我觉得硬盘大的情况下,有多大搞多大,我只要控制内存的使用率在99%时才使用swap, ...

  10. SEPIC 单端初级电感转换器 稳压器 -- Zeta 转换器

    single ended primary inductor converter 单端初级电感转换器 SEPIC(single ended primary inductor converter) 是一种 ...