现在实现flexbox 的策略和工具（flexbox兼容到IE8的跨浏览器解决方案）

待我称王封你为后i 2022-08-19 02:18 63阅读 0赞

原文：[FLEXBOX IN THE REAL WORLD][]

*flexbox 相当好用，但是现在就可以用flexbox并且让它支持到IE8吗？如果你跟着下面的步骤，现在就可以开始用flexbox啦。*

--------------------

我介绍flexbox已经有一段时间了，别人问得最多的问题是“什么时候flexbox能得到足够好的支持，可以用到实际的项目中？”

我总觉得flexbox在[快速原型开发][Link 1]中有一席之地。但我也认为进行小小的规划，大多数人现在就可以将flexbox用在实际的产品中。

在这篇文章中，我们一起探索将flexbox用在产品中的条件、最佳的设计方案和兼容到IE8。

我们用的demo是[我朋友][Link 2]正在开发的一个[小项目][Link 3]的注册页。皮特在用BootStrap的栅格系统时遇到的一些布局问题，如果用flexbox就很容易解决，所以这是一个很好的例子。下面这个是我们将要创建的布局。

![注册Demo][Demo]

这个demo的代码可以在[Github][]上找到。

我们可以会遇到以下四个场景：

*  只支持最先进的浏览器
 *  你的网站IE用户很少
 *  必须支持IE8，但是网页布局可以不一样
 *  必须支持IE8，布局看起来要一致。

## 场景\#1，你只需支持最先进的浏览器 ##

我们以最理想的场景开始，但是我们很快就要解决IE8的问题。

你可以到[这里][Link 4]看这种场景的演示，和到[这里][Link 5]看代码。

我在看自己网站的流量监控时，IE用户几乎是没有的。只有大约1%的用户用的是IE10/11。这个[博客][Link 6]和我的[网页][Link 7]是给像你这样的开发者看的，所以我只需要支持像我们这些人用的最新浏览器就可以了。

如果你的网站是像我这样的，你现在就可以用flexbox最新的语法了，但是要注意这点：

*  不要用flex-wrap，因为这个属性不支持版本号低于28的firefox浏览器。
 *  除了无前缀语法外，加上-webkit-前缀。
 *  不要用在[整体页面布局][Link 8]

遵循这些规则，你就可以放心用flexbox了。

让我们一起来用flexbox布局来写下这个例子。

最上面不同定价计划的盒子是一个可伸缩的容器，皮特想让按钮对齐在底部。如果外部容器是一个flex容器，并且align-items设为stretch（默认），那么所有的盒子会有相同的高度，按钮很自然地排在了底部，并且按钮自动分配间距。

首先，让整块区域变成一个可伸缩的容器。

.plans {
          display: -webkit-flex;
          display: flex; 
      }

这会让它们排成一行，并且垂直拉伸。

然后将价格容器变成可伸缩的容器。将direction设为column，并且将align-items设为flex-start;否则这些按钮会拉伸，充满整个水平空间。

.plans > div {
          display: -webkit-flex;
          display: flex;
          -webkit-flex-direction: column;
          flex-direction: column;
          -webkit-align-items: flex-start;
          align-items: flex-start; 
      }

现在剩下的就是将按钮放到底部，选中按钮，并设置margin-top:auto;

.plans > div a {
        margin-top: auto; 
    }

我会用这样的方式在页面的其他地方用flexbox，因为我假设你已经了解过flexbox，所以我不会说太多的细节。（如果还不了解flexbox，请看[这里][Link 9]）

## 场景\#2：你的网站IE用户很少 ##

这种场景的在线演示在[这里][Link 10]，代码在[这里][Link 11]。

即使低版本的浏览器有一点点流量，你也想让IE10和firefox25或者更低版本的浏览器也能正常浏览。

如果在最新的语法中加上旧版本的flexbox的写法，你可以让IE10和低版本的firefox、safari和opera也能正常浏览。（去 [Can I Use][] 查看更多浏览器支持的信息）

将flexbox加上所有的前缀是一件很繁琐的事情，所以用[Autoprefixer][]来替你自动完成吧。如果你没有用过Grunt/Gulp/makefiles或者类似的工具，这里可以让你[学习使用Grunt和Autoprefixer][Grunt_Autoprefixer]。

在这种方法中，不要使用自动间距，因为它们不会支持所有的版本。同时要对IE10进行全面的测试，因为IE10中会有一些Bug。例如，我需要将按钮上面的段落宽度设为100%,否则，文字会超出容器之外（没有自动间距之后，我必须伸缩段落和将按钮挤到底部。）。

下面是定价包区域的代码，让你感受一下autoprefixer。

.plans {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex; }
          .plans > div {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 33%;
            -ms-flex: 1 1 33%;
            flex: 1 1 33%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            -ms-flex-align: start;
            align-items: flex-start; }
            .plans > div .stretch {
              width: 100%;
              -webkit-box-flex: 1;
              -webkit-flex: 1 0 auto;
              -ms-flex: 1 0 auto;
              flex: 1 0 auto; 
      }

使用Autoprefixer，你可以自动生成这些代码，所以你只需要写最新的语法即可。还有额外的好处是，你不单可以在写flexbox时用它，还可以将它用在所有的CSS上。

## 场景3：必须支持IE8，但是网页布局不需如此漂亮 ##

这种场景的在线演示在[这里][Link 12]，代码在[这里][Link 13]。

大部分客户和老板都想网页在所有支持的浏览器中看起来都一样，但也有少数客户和老板希望渐进增强。

在这种情况下，渐进增强的方式下，IE8的用户看到的价格包不需要排成一行。你可以将flexbox和旧式布局样式联合起来使用。如果flexbox可用，将会应用flexbox样式，如果浏览器不支持，浏览器将会忽略flexbox布局，回退到简单的布局。

佐伊·吉伦瓦特（Zoe Gillenwater）几个月前对此作了很精彩的介绍，[这是她文章的地址。][Link 14]

这是使用flexbox最保险的方法并且支持旧版本的浏览器，但是这也意味着代码的冗余，并且要找出能“很好地支持”的客户端，而且老板有时是不好说话的。

在我们这个例子中，最简单的方法是：在IE8和IE9中，我们不需要将按钮底部对齐，但是依旧需要将价格区块排成一行，所以我们使用float。

.plans > div {
          width: 33%;
          float: left;
          flex: 1 1 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start; 
          ·}

（注意：这里展示的是最新的语法，但是这些代码在演示地址中已经自动补全了）

flex-direction设为column，并且价格计划中的每个元素都是块元素。因为它们已经垂直排列，所以我们在这里不需要再做其他事情。

注册框是一个可伸缩容器，所以我们要设定宽度和display属性。

.well form .inputs #email {
          width: 50%;
          display: inline;
          flex: 1 0 auto; }
        .well form .inputs .btn {
          width: 250px;
          width: 25rem;
          margin-left: 16px;
          margin-left: 1rem; 
      }

footer也是一个可伸缩容器，所以也添加一些float。你应该明白我的意思了。下面是在IE8下的效果。

![footer Demo][]

## 场景\#4：必须要支持IE8和IE9，并且看起来一模一样 ##

这种场景的在线演示在[这里][Link 15]，代码在[这里][Link 16]。

如果你在这种范畴内，你可能会根本不想用flexbox。你不是完全无望，但是可用的选项是有限的。

你可以使用flexbox跨浏览器插件[flexie.js][]，但是它只对其中一种旧的flexbox语法起作用，不支持新的语法。你可能会想，我可以用Autoprefixer，然后再为IE9和更旧版本的浏览器加载flexie.js，但是这是没有用的。

还存在另外一些问题。首先，flexie.js只会找那些没有前缀的CSS。但是Autoprefixer 不会为旧语法生成没有前缀的CSS，可能是因为浏览器根本用不上这些语法。

你可以通过修改flexie.js修复这些问题，但是你依旧走不出困境。在媒体查询中使用flexbox，Flexie.js会有很多bug，因为包含了一个硬编码版本的Selectivizr，[和respond.js一起用时会无效][respond.js]。

在修复这些问题之前（如果可以修复），我能想到的唯一方法是创建一张专门针对IE8/9的样式表，在这张样式表中使用旧语法。

即使这样，你也不能只用flexbox就期望所有效果都很好。你绝对不可以使用自动间距。你必须要让布局尽量简单。我发现不可以让flexbox旧语法都可以达到新语法同样的效果，特别是用了跨浏览器解决方案之后。

但是如果你不用媒体查询，只要付出一点点关爱，你就可以让flexbox在IE8上正常工作了。

在[示例代码][Link 16]中，你可以我打了补丁的flexie.js。我用最快速的方法让它起了作用，所以不要用它进行生产，帮大家一个忙，打一个真正的补丁，然后将它发给flexie.js的[作者][Link 17]。

## 现在语法的跨浏览器解决方案 ##

我们需要的是使用现代语法的跨浏览器解决方案。好消息是flexie.js的作者理查德·赫雷拉（Richard Herrera）正在[改善][Link 18]它。但是直到现在，还远没有完成。

## 学习最新的flexbox语法 ##

新版本的flexbox语法出来还不是很久，所以很多人对此也不是很熟悉。如果你想将flexboxl加入你的武器库，我有一些很好的资料推荐给你。

我为flexbox写了一些[免费教程][Link 9]，你正在读的这篇文章恰好是这个系列的最新课程。如果你喜欢，可以点击[这里][Link 9]获取剩余的文章。

![book.png][]

用快速的开发周期打动你的客户。随心所欲地使用CSS布局，给你的客户看一个他们可以正常使用的程序。

[FLEXBOX IN THE REAL WORLD]: http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/
[Link 1]: http://www.planningforaliens.com/blog/2013/10/07/flexbox-first/
[Link 2]: https://twitter.com/zrail
[Link 3]: http://www.pagesnap.io/
[Demo]: http://www.planningforaliens.com/images/flexbox-now/layout.png
[Github]: https://github.com/sfioritto/real-world-flexbox
[Link 4]: http://www.planningforaliens.com/examples/real-world-flexbox/latest_syntax_only/
[Link 5]: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/latest_syntax_only
[Link 6]: http://www.planningforaliens.com/
[Link 7]: http://www.sketchingwithcss.com/
[Link 8]: http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
[Link 9]: http://www.sketchingwithcss.com/flexbox-tutorial/
[Link 10]: http://www.planningforaliens.com/examples/real-world-flexbox/autoprefixed/
[Link 11]: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/autoprefixed
[Can I Use]: http://caniuse.com/#feat=flexbox
[Autoprefixer]: https://github.com/ai/autoprefixer
[Grunt_Autoprefixer]: http://www.planningforaliens.com/blog/2014/03/07/grunt/
[Link 12]: http://www.planningforaliens.com/examples/real-world-flexbox/progressive_enhancement/
[Link 13]: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/progressive_enhancement
[Link 14]: http://zomigi.com/blog/flexbox-presentation/
[footer Demo]: http://www.planningforaliens.com/images/flexbox-now/progressive.png
[Link 15]: http://www.planningforaliens.com/examples/real-world-flexbox/flexie/
[Link 16]: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie
[flexie.js]: https://github.com/doctyper/flexie
[respond.js]: http://selectivizr.com/tests/respond/
[Link 17]: https://twitter.com/doctyper
[Link 18]: https://github.com/doctyper/reflexie/tree/develop
[book.png]: http://www.planningforaliens.com/images/book.png