zoukankan      html  css  js  c++  java
  • 移动端切图关于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 层作水平垂直居中即可
  • 相关阅读:
    【构建工具】《Maven实战》读书笔记
    【网络安全】Dos攻击科普文
    谈谈集合.CopyOnWriteArrayList
    谈谈集合.List
    小程序开发--移动端分辨率与rpx
    跟面向对象卯上了,看看ES6的“类”
    捋一捋js面向对象的继承问题
    Canvas的drawImage方法使用
    浏览器内核趣对话
    “茴”字有四种写法,this也是一样
  • 原文地址:https://www.cnblogs.com/gao-xiaomeng/p/4916732.html
Copyright © 2011-2022 走看看