移動端切圖關於flex 應用

若是說寫手機頁面最經常使用的技術是什麼，我認爲是 flex，爲了讓內容自適應，等分，水平居中，垂直居中，咱們均可以直接使用 flex 解決，事實上，它的表現跟 table 相似。
但 flex 麻煩的一點是須要寫點兼容，由於它在成長的過程當中，出現了不一樣的規範定義，形成如今不一樣系統對其支持的寫法不同，故麻煩了一點，這裏當成代碼片斷總結一下。

1. 等分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

2. 水平居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

3. 垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}

 

注1：上面 parent 表明父元素，child 表明子元素，水平垂直居中把上面的分別合併起來便可。 注2： 在有了 flex 以後，如今不少彈窗組件的結構也在發生着變化，之前遮罩層都是與彈窗分開的，如今在移動端，徹底能夠直接嵌套起來，如： div.overlay>div.pop , 而後 overlay 層 position: fixed; top: 0; bottom: 0; left: 0; right: 0; pop 層做水平垂直居中便可