【响应式Web设计】读书笔记 - 弹性布局与响应式图片（二） - 4

【简介】Flexbox 的主要优点可以概括为：方便地垂直居中内容；改变元素的视觉次序，在盒子里自动插入空白以及对齐元素，自动对齐元素间的空白。

1. Flexbox 概述

1.1 浏览器对 Flexbox 的支持

浏览器对于这些新特性的支持需要加前缀，因为近几年来浏览器不断以实验性特性推出新功能，而这些实验性特性都要加「厂商前缀」。每家厂商都有自己的前缀，比如 -ms 是 Microsoft， -webkit- 是 WebKit， -moz- 是 Mozilla。

.flex{
    display: flex;
    flex: 1;
    justify-content: space-between;
}


.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

为了做兼容，就不得不写这些额外的代码，显得十分繁琐，而且很难记忆，因此，需要找一个自动加前缀的方法。一款比较方便的插件 Autoprefixer （https://github.com/postcss/autoprefixer），就能很好地解决前缀的问题，下面主要以 Sublime Text 为例，讲解一下 Autoprefixer 的安装过程中的几个重要的步骤：

1. 确保安装Nodejs，且环境变量配置在全局环境中。
   nodejs 的安装过程在这里不做讲解，主要检查一下nodejs是否安装：通过 cmd 命令行中输入node -v ，若能输出版本号，说明已经安装且配置在全局环境中。
   

2. sublime 中输入ctrl+shift+k，调出安装工具，输入install，选择「Install Package」：
   

3. 在跳出来的输入框中输入Autoprefixer，选择安装；

4. 在(Preferences → Key Bindings - User)中配置快捷键：
   

完成安装后，我们只需要输入：

.flex{
    display: flex;
    flex: 1;
    justify-content: space-between;
}

再按 autoprefixer 的快捷键即可完成自动添加：

.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

欢迎大家关注我的新浪微博 - 一点编程，了解最新动态 。