移动端切图关于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 层做水平垂直居中便可