[翻译] CSS3弹性盒模型布局模块 (aka Flex Box)介绍和demo/测试用例 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> [翻译] CSS3弹性盒模型布局模块 (aka Flex Box)介绍和demo/测试用例

[翻译] CSS3弹性盒模型布局模块 (aka Flex Box)介绍和demo/测试用例

浏览:1445次出处信息

CSS3 Flexible Box Layout Module (aka Flex Box) introduction and demos/test cases

CSS3弹性盒模型布局模块 (aka Flex Box)介绍和demo/测试用例

来源：Robert’s talk

原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/

翻译：纪莹

Doing layouts on the web has always been hard, but it seems like we’re getting a better option to do it now.

Web布局一直是难点，但貌似现在我们有更好的选择了。

Background

背景

First, we had tables for layout, and while semantically incorrect, with proper nesting and other tricks, we could build fairly functional layouts with them.

首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。

Then along came floats which most of the people are using today. We can use any element we want to, but floats aren’t really for the fainthearted. On surface it seems pretty basic, but the complex functionality behind can make seasoned developers look dumbfounded at their screens. Also, one of the downsides with floats is needing to clear them through extra clear elements or, better, clear CSS floats without extra markup.

然后是现在大多数人都在使用的浮动布局。我们可以使用任何我们想用的元素,但浮动并不适用于初学者。表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕不知所措。另外,浮动布局有一个缺点就是需要通过额外的元素清除浮动,或者更好一点,可以清除CSS浮动而不添加额外的标签。

Downside with that, though, besides from it’s not that easy to grasp floats, is that we need various trickery to support equal-height columns, since there’s no default way to set up a relationship between elements with floats.

这些缺点使得浮动布局不是很容易掌握，因为没有一个默认的方法可以建立起浮动与元素之间的关系，所以我们还需要更多的方法来实现多栏等高布局。

Then some people have started using display: table, display: table-cell etc, but since support took so long to get in Internet Explorer (IE8), people seemed to give up on it and just accept floats as the de-facto solution.

然后有些人开始使用display: table,display: table-cell等,但由于直到IE8 Internet Explorer浏览器才支持,人们似乎放弃了而只是接受float作为实际解决方案。

Introducing Flexible Box Layout Module (aka Flex Box)

介绍弹性盒模型布局模块(aka Flex Box)

One hidden gem that most people seem to have missed is the Flexible Box Layout Module. It offers:

有一个隐藏的利器,就是大多数人似乎已经忽视的弹性盒模型布局模块。它提供了:

・ Equal-height columns.

・等高的栏目。

・ Source-order independence for elements.

・元素顺序独立。

・ Specifying a relation between elements.

・指定元素之间的关系。

・ Flexible size and alignment of content.

・灵活的尺寸和对齐方式。

A simple example

一个简单的例子

Let’s say we want to display three columns next to each other. It would then look like this:

当我们想要显示一个三栏布局，我们会这样做:

We’re using the display property to set the containing element to a box, and then we use the box-orient property to set it to be horizontal (you could also use vertical).

我们使用display属性把容器元素设为 box,然后我们用box-orient属性,将它设置水平(你也可以使用vertical设为垂直)。

With this approach, the direct child elements (i.e.

etc) will be laid out next to each other, with their width set to their contents. But what if we want them to together expand out the entire parent width, in a flexible manner? Then we need to apply box-flex to them:

用这个方法,直接子元素(如

等)将被一个接一个水平放置,它们的宽度由它们的内容决定。但是如果我们想用自适应的方法让它们扩展到整个容器元素的宽度该怎么办呢?那么我们就需要为它们设置box-flex:

The value of the box-flex property is about how the remainder of the width is divided by the elements, as explained in Zoe’s comment, where a larger number means wider. It also means that each element can afford having a padding, which won’t make them become too wide (great, right?).

box-flex属性的值是和被分割的容器元素的宽度相关的,就像佐伊的评论的,数字越大就越宽。这也意味着每个元素的padding不会额外增加它的宽度(不错吧?)。

Setting presentation order

设置呈现顺序

We have two ways of setting presentation order, which is through the box-direction property on the parent element (i.e. the one with the display: box property set), or we can use box-ordinal-group to give each column/child element a number which is in the order they will be visually represented (interestingly enough, in Firefox this also aligns the elements to the right, but in Google Chrome and Safari they are to the left):

我们有两种方法设置呈现顺序,可以通过设置容器元素(即设置display: box的元素)的box-direction属性,或者我们可以用box-ordinal-group给每一个列/子元素设置一个数字来表示它们的呈现顺序(有趣的是,这个属性在火狐中会使元素右对齐，而谷歌Chrome和Safari是左对齐):

meaning they are presented in a reversed order, or:

表示反向呈现,或:

where col-3 is presented first, then col-1 and finally col-2 at the end.

表示col-3是第一个,然后是col-1，最后是col-2。

Centering and justifying

居中对齐和两端对齐

We have another interesting property, box-pack, which we can use to specify how the boxes should be presented, e.g. centered, justified etc. This would center the three of them within their parent element (interestingly, the previously set padding now disappears):

还有一个属性,box-pack,可以它来规定盒子的呈现方式,例如居中，两端对齐等。这个例子使三个元素在它们的父元素内居中(有趣的是,之前设置的padding消失了):

We could also justify the three elements evenly within their parent:

我们也可以让这三个元素在父元素内两端对齐：

However, justifying only seems to work properly in WebKit-based web browsers (Google Chrome and Safari).

然而,两端对齐貌似只在WebKit内核浏览器中有效(谷歌Chrome和Safari)。

Flexible Box Layout Demo

弹性盒模型布局demo

As part of my ongoing CSS3 test suite, I have added a number of CSS3 Flexible Box Layout Module examples and test cases, where you can see the tests in your web browser, the code being used and also the possibility to change it and see what happens.

我加入了一些CSS3弹性盒模型布局实例和测试用例到我还在不断完善中的CSS3测试套件,你可以用自己的浏览器看看这些例子,也可以修改代码看看会发生什么。

Web browser support

浏览器支持

・ Firefox 3.0+

・ Google Chrome 5.0+

・ Safari 3.2+

・ iOS 3.2+ (Mobile Safari)

・ Android 2.2+

That’s a pretty good web browser base, but unfortunately there’s still no trace of support in the beta of Internet Explorer 9 or beta of Opera 11, but I do hope it catches on there too, because we really need another alternative for creating layouts on the web.

这已经是相当好的浏览器支持,但不幸的是,目前仍然没有发现Internet Explorer 9测试版或Opera 11测试版将要支持弹性盒模型布局的痕迹,但我希望它们可以跟上,因为我们真的需要一个替代方案来在web上创建布局。