Flex.css：移动端快速布局的神器

在你日常开发移动端应用的时候，是不是经常被不同浏览器的兼容性问题搞得头疼？特别是那些不支持标准 flex 布局的老旧浏览器，真是让人无从下手。不过呢，有了 Flex.css，这些问题都能迎刃而解。

为什么需要 Flex.css？

Flex.css 是专门为了解决移动端布局问题而生的。因为并不是所有的浏览器、webview 或者微信等都支持标准的 flex 布局，但几乎都会支持 -webkit-box。Flex.css 的出现就是为了确保每一个属性都能支持标准 flex 或旧版本的 -webkit-box。它采用了 autoprefixer 编译，这样即使浏览器不支持标准 flex 布局，也能回滚到旧版本的 -webkit-box，保证在移动设备中呈现出一致的布局效果。

使用 Flex.css 的优点

简洁的 API：Flex.css 提供了简洁易懂的 API，熟悉的属性值让你轻松上手。
布局与 CSS 分离：在 HTML 中通过属性的方式进行布局，这样布局和 CSS 就分离开来了，布局结构清晰，更容易维护。
React 支持：特别是在 React 中使用 data-flex 属性布局，维护起来更加方便。

浏览器支持情况

Android：从 2.3 开始支持旧版本 display:-webkit-box;，4.4 开始支持标准版本 display: flex;。
iOS：6.1 开始支持旧版本 display:-webkit-box;，7.1 开始支持标准版本 display: flex;。
PC：如果不需要兼容 IE10 以下版本，也可以使用 Flex.css。

Flex.css 同时兼容新旧版本，确保在浏览器不支持新版本时回退到旧版本。

如何使用 Flex.css？

要使用 Flex.css，只需将 dist 目录下的 CSS 文件引入到你的页面中，根据需要选择引入 flex.css 或 data-flex.css（React 使用）。如果使用了 webpack 打包，安装后并配置了 ES6 编译器的话，可以直接使用：

    javascript
    import 'flex.css'; // flex 属性匹配
import 'flex.css/dist/data-flex.css'; // data-flex 属性匹配 (React 使用)

Flex 属性示例

下面是一个简单的子元素居中示例：

    html
    <div flex="main:center cross:center" style="width:500px; height:500px; background:#108423">
  <div style="background:#fff">看看我是不是居中的</div>
</div>

Flex 属性大全

dir：主轴方向，如 top、right、bottom、left（默认）。
main：主轴对齐方式，如 right、left（默认）、justify、center。
cross：交叉轴对齐方式，如 top（默认）、bottom、baseline、center、stretch。

我的感觉是

Flex.css 真的是移动端开发者的福音，特别是那些需要兼容各种浏览器的项目。它让布局变得简单而高效，不再需要为不同的浏览器写一堆兼容代码。在我看来，使用 Flex.css 后，布局问题就像是小菜一碟，再也不用为此烦恼啦！