download

git clone https://github.com/lzxb/flex.css.git

npm

npm install flex.css --save

為什麼需要flex.css?

在移動端開發中，並不是所有的瀏覽器，webview，微信等各種版本都支援標準的flex，但是基本上都會支援-webkit-box，所以flex.css的主要作用是保證每一個屬性都能支援標準flex或舊版本的-webkit-box。由於flex.css採用了autoprefixer編譯，所以能夠保證在瀏覽器不支援標準flex佈局的情況下，回滾到舊版本的-webkit-box，保證移動裝置中能呈現出一樣的佈局效果。
 
於是，一款移動端快速佈局的神器誕生了...

merits

簡潔的api，熟悉的屬性值，入門毫無壓力。在html中採用屬性的方式布，將佈局和css進行分離，清晰的佈局結構讓你更容易維護，可以在不更改css的情況下更改佈局。特別是在React中使用data-flex屬性佈局，維護起來更加的方便。

support

flex佈局分為舊版本dispaly: box;，過渡版本dispaly: flexbox;，以及現在的標準版本display: flex;Android2.3開始就支援舊版本 display:-webkit-box;4.4開始支援標準版本 display: flex;

IOS
  
 
6.1開始支援舊版本 display:-webkit-box;7.1開始支援標準版本 display: flex;

PC
  如果你不需要相容ie10以下版本，也是可以使用flex.css

flex.css同時能相容新版本和舊版本，保證了瀏覽器不支援新版本時，回退到舊版本。

use

<!--
  將dist目錄下的css檔案引入到你的頁面中，根據你的需要引入
  flex.css 使用flex屬性匹配
  data-flex.css 使用data-flex屬性匹配（React使用）
  如果使用了webpack打包，npm安裝後，並且配置了ES6編譯器的話，
  flex 屬性匹配可以直接使用：
    import 'flex.css';
  data-flex 屬性匹配可以直接使用(react使用)
    import 'flex.css/dist/data-flex.css';
 -->
 
<!-- flex屬性匹配，簡單的子元素居中例子： --><divflex="main:center cross:center"style="width:500px; height:500px; background:#108423"><divstyle="background:#fff">看看我是不是居中的</div></div><!-- data-flex屬性匹配，簡單的子元素居中例子： --><divdata-flex="main:center cross:center"style="width:500px; height:500px; background:#f1d722"><divstyle="background:#fff">看看我是不是居中的</div></div>

flex屬性大全

dir：主軸方向
    top：從上到下
    right：從右到左
    bottom：從上到下
    left：從左到右（預設）

main：主軸對齊方式
    right：從右到左
    left：從左到右（預設）
    justify：兩端對齊
    center：居中對齊

cross：交叉軸對齊方式
    top：從上到下
    bottom：從上到下
    baseline：跟隨內容高度對齊
    center：居中對齊
    stretch：高度並排鋪滿（預設）

box：子元素設定
    mean：子元素平分空間
    first：第一個子元素不要多餘空間，其他子元素平分多餘空間last：最後一個子元素不要多餘空間，其他子元素平分多餘空間
    justify：兩端第一個元素不要多餘空間，其他子元素平分多餘空間

flex-box屬性說明

取值範圍(0-10)，單獨設定子元素多餘空間的如何分配，設定為0，則子元素不佔用多餘的多餘空間多餘空間分配=當前flex-box值/子元素的flex-box值相加之和

adviertisement

深圳html5開發者社群：170761660NodeJS前端分享群：133240225

demo