翻译正在进行中。

 

虽然弹性盒子被各种现代浏览器很好的支持, 但是你或许还会遇到一些问题。在这个文档中,我们将会了解到浏览器支持弹性盒子的情况和一些潜在的问题, 以及处理它们的资源和方法。

弹性盒子的历史

与所有CSS标准一样,弹性盒子标准经历了一系列的改动,知道它成为我们现有的候选推荐版本。作为候选推荐,我们不该着重于当下对于该规范的大量变动,尽管历来弹性盒子的迭代情况有所不同。

弹性盒子曾在许多浏览器中作为实验功能的方式被实现。当时进行实验性的实现的方式是使用浏览器前缀。这种关于前缀的构思是为了让规范的实现能被测试,并被浏览器工程师和网页开发者等在不和其他实现冲突的情况下浏览。也就是说不再生产代码中使用实验性的实现。然后,前缀最终被用在了生产代码中,结果对实验性规范的不管修改导致了人们需要不断对网站进行对应的修改。

在2009年时,规则看起来很不一样。当时,要创建一个弹性容器你会用display: box ,会有一大堆 box-* 属性,和现在的弹性盒子显然完全不同。

曾有一个规范的更新将语法换成了 display: flexbox ——这仍旧是浏览器前缀。

最后规范被修改成,定义 display: flex 作为创建弹性容器的方式。对于最新版本规范的浏览器支持自此就尽善尽美了。

有很多老的关于弹性盒子规范旧版本的文章还存着,但他们都容易通过弹性盒子容器创建的方式来辨别。如果你在其中找到任何关于display: box或者display: flexbox的内容,那么它们就是过时的信息。

浏览器支持情况

现代浏览器能够很好的支持flexbox,并且大多数浏览器不需要前缀。2015年,Safari9是最后一个移除前缀的主流浏览器。2个需要注意浏览器兼容的浏览器是:

Internet Explorer 10: 使用-ms-前缀;

UC浏览器: 使用-webkit-前缀。

现在,IE11 已经支持display: flex,但是在使用的时候会有一些bug。

常见问题

The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.

如果你想要支持非常旧的浏览器使用flexbox属性,在CSS中加入:

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Autoprefixer Online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check Can I Use for information about when prefixes were removed in browsers to make your decision.

Useful fallback techniques

Given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.

Floated items

“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - 3. Flex Containers

In the following live example, I have floated two blocks and then set display: flex on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.

You can test the fallback behaviour by removing display: flex from the wrapper.

display: inline-block

Once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies.

Remove display: flex to see the fallback behavior. You'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items.

display: table-

The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.

If you use display: table-cell on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.

If you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.

“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - 4. Flex Items

The vertical-align property

The live example below demonstrates use of the vertical-align property along with display: inline-block. Both display: table-cell and display: inline-block allow for the use of this property. Use of vertical-align enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead.

Feature Queries and flexbox

You can use feature queries to detect flexbox support:

@supports (display: flex) {
  // code for supporting browsers
}

Note that Internet Explorer 11 does not support feature queries yet does support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:

@supports (display: flex) or (display: -webkit-box) {
  // code for supporting browsers
}

For more information about using Feature Queries see Using Feature Queries in CSS on the Mozilla Hacks blog.

Conclusion

While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, minvedacat, Ran_Lyu, xieminjie
最后编辑者: mdnwebdocs-bot,