search

Home  >  Q&A  >  body text

css3 - 公司要做一个手机app应用内嵌的网页,问下如果是在安卓机上显示得话,flexbox是否能兼容

顺便问一下在苹果上能兼容显示正常吗

巴扎黑巴扎黑2863 days ago630

reply all(5)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:39:22

    / Child element-average distribution /
    .flex1 {
    -webkit-box-flex: 1; / OLD - iOS 6-, Safari 3.1-6 /
    -moz-box-flex: 1; / OLD - Firefox 19- /
    width: 20%; / For old syntax, otherwise collapses. /
    -webkit-flex: 1; / Chrome /
    -ms-flex: 1; / IE 10 /
    flex: 1; / NEW, Spec - Opera 12.1, Firefox 20+ /
    }
    / Father element - horizontal arrangement (main page) /
    .flex-h {
    display : box; / OLD - Android 4.4- /
    display: -webkit-box; / OLD - iOS 6-, Safari 3.1-6 /
    display: - moz-box; / OLD - Firefox 19- (buggy but mostly works) /
    display: -ms-flexbox; / TWEENER - IE 10 /
    display: -webkit-flex; / NEW - Chrome /
    display: flex; / NEW, Spec - Opera 12.1, Firefox 20+ /
    / 09th edition /
    -webkit-box-orient: horizontal;
    / 12th edition /
    -webkit-flex-direction: row;
    -moz-flex-direction : row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    }
    / Father element - Horizontal line /
    .flex-hw {
    / 09th edition /
    /-webkit-box-lines: multiple;/
    / 12th edition /
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    - o-flex-wrap: wrap;
    flex-wrap: wrap;
    }
    / Father element - horizontal stay (main vehicle is horizontal direction) /
    .flex- hc {
    / 09th edition /
    -webkit-box-pack: center;
    / 12th edition /
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    /* Get it:

    align-items     主轴原点方向对齐
    flex-end        主轴延伸方向对齐
    space-between   等间距排列,首尾不留白
    space-around    等间距排列,首尾留白

    */
    }
    / Parent element - vertical arrangement (main axis) /
    .flex-v {
    display: box; / OLD - Android 4.4- /
    display: -webkit-box; / OLD - iOS 6-, Safari 3.1-6 /
    display: -moz-box; / OLD - Firefox 19- (buggy but mostly works) /
    display: -ms-flexbox; / TWEENER - IE 10 /
    display: -webkit-flex; / NEW - Chrome /
    display: flex; / NEW, Spec - Opera 12.1, Firefox 20+ /
    / Version 09/
    -webkit- box-orient: vertical;
    / version 12/
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex -direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    }
    / Parent element - vertical line wrapping /
    . flex-vw {
    / Version 09/
    /-webkit-box-lines: multiple;/
    / Version 12/
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    }
    / Parent element - vertical centering (only effective when the main axis is horizontal) /
    .flex-vc {
    / Version 09/
    -webkit-box-align: center;
    / Version 12/
    -webkit-align-items: center;
    -moz-align -items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    }
    / sub Element - displayed at the 1st position from left to right (top to bottom), used to change the source document order display /
    .flex-1 {
    -webkit-box-ordinal-group: 1; / OLD - iOS 6-, Safari 3.1-6 /
    -moz-box-ordinal-group: 1; / OLD - Firefox 19- /
    -ms-flex-order: 1; / TWEENER - IE 10 /
    -webkit-order: 1; / NEW - Chrome /
    order: 1; / NEW, Spec - Opera 12.1, Firefox 20+ /
    }
    / child element - displayed in the 2nd position from left to right (top to bottom), used for Change the order of source documents to display /
    .flex-2 {
    -webkit-box-ordinal-group: 2; / OLD - iOS 6-, Safari 3.1-6 /
    -moz-box-ordinal-group: 2; / OLD - Firefox 19- /
    -ms-flex-order: 2; / TWEENER - IE 10 /
    -webkit-order: 2; / NEW - Chrome /
    order: 2; / NEW, Spec - Opera 12.1, Firefox 20+ /
    }

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:39:22

    webapp

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:39:22

    Mobile compatibility has a lot to do with the mobile phone system version. Because web pages embedded in applications generally use the system's own browsing kernel. It's really hard to judge if you don't tell me a specific version. Generally speaking, iOS is more compatible than Android and has higher performance

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:39:22

    It’s OK if Apple supports it, but if it’s Android, it varies greatly depending on the system. Especially the browser that comes with the WeChat Android version. Before, its kernel did not support flexbox. Now it is said that it has been updated, but I haven’t tried it yet.
    In general, you should first consider your target user group, starting from aspects such as age, consumption level, psychology, etc., and know the approximate proportion of Android and iOS users among them (as well as the approximate proportion of different Android phones) Later, it will be easier to choose technology. After investigation, if you find that only a small number of users' mobile phones do not support flexbox, you can safely use it to a certain extent.
    by the way, anyway it is recommended to handle compatibility to a certain extent

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:39:22

    http://pleeease.io/play/

    The css3 prefix of this website is generated, try to do the best. .

    reply
    0
  • Cancelreply