zoukankan      html  css  js  c++  java
  • flex布局

    flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法笔者实践过,效果良好~

    /* ============================================================
       flex:定义布局为盒模型
       flex-v:盒模型垂直布局
       flex-1:子元素占据剩余的空间
       flex-align-center:子元素垂直居中
       flex-pack-center:子元素水平居中
       flex-pack-justify:子元素两端对齐
       兼容性:ios 4+、android 2.3+、winphone8+
       ============================================================ */
    .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
    .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
    .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
    .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
    .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
    .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

    示例:两端对齐

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <style type="text/css">
    /* ============================================================
       flex:定义布局为盒模型
       flex-v:盒模型垂直布局
       flex-1:子元素占据剩余的空间
       flex-align-center:子元素垂直居中
       flex-pack-center:子元素水平居中
       flex-pack-justify:子元素两端对齐
       兼容性:ios 4+、android 2.3+、winphone8+
       ============================================================ */
    .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
    .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
    .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
    .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
    .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
    .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
    </style>
    </head>
    <body>
    
    <div class="flex flex-pack-justify">
        <div>模块一</div>
        <div>模块二</div>
        <div>模块三</div>
        <div>模块四</div>
    </div>
    
    </body>
    </html>

    使用注意:

    • flex下的子元素必须为块级元素,非块级元素在android2.3机器下flex失效
    • flex下的子元素宽度和高度不能超过父元素,否则会导致子元素定位错误,例如水平垂直居中

    flexyboxes http://www.w3cplus.com/css3/advanced-cross-browser-flexbox.html

    “老”的Flexbox和“新”的Flexbox http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html

    跨浏览器的Flexbox http://the-echoplex.net/flexyboxes/

  • 相关阅读:
    -bash: fork: Cannot allocate memory 问题的处理
    Docker top 命令
    docker常见问题修复方法
    The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
    What's the difference between encoding and charset?
    hexcode of é î Latin-1 Supplement
    炉石Advanced rulebook
    炉石bug反馈
    Sidecar pattern
    SQL JOIN
  • 原文地址:https://www.cnblogs.com/webgg/p/5341862.html
Copyright © 2011-2022 走看看