css flex布局不工作在一些iPad [英] css flex layout not working on some iPads

问题描述

我在ipad上遇到了一些问题。我想要三个等间距的盒子。它的工作罚款在我的ipad，和各种浏览器（在桌面上的inc safari）然而，一些iPad显示，箱子之间没有空间，都是向左。

这里是html

  < aside id =home-page-postcardsclass =home-page-postcardsrole =complementary> 
< div class =postcard-wrapper> 
< div class =postcard> ... content ...< / div> 
< div class =postcard> ... content ...< / div> 
< div class =postcard> ... content ...< / div> 
< / div> 
< / aside> 
  

我有这个css;

  .home-page-postcards {
 background：#fff; 
 width：100％; 
 padding-top：60px; 
 padding-top：35px; 
 padding-bottom：40px; 
} 
 
 
 .postcard-wrapper {
 display：-webkit-box; 
 display：-moz-box; 
显示：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 
 width：1170px; 
 margin：0 auto; 
 
 -webkit-flex-flow：row nowrap; 
 flex-flow：row nowrap; 
 
 -webkit-justify-content：space-between; 
 justify-content：space-between; 
} 
 
 .postcard {
 width：31.2％; 
 font-family：'Belleza'，sans-serif; 
 font-size：20px; 
 line-height：1.3; 
} 
  

解决方案

2009年 -webkit-box 语法 justify-content：space-between 。旧版iPad 6.1需要 -webkit-box-pack：justify; 。

对于flexbox back-compat，所有非默认属性的2个附加语法，包括所有浏览器的 -moz - 和 -ms - 前缀。

您的包装应为：

  display：-webkit-box ; 
 display：-moz-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -webkit-box-pack：justify; 
 -moz-box-pack：justify; 
 -webkit-justify-content：space-between; 
 -ms-flex-pack：justify; 
 justify-content：space-between; 
  

查看此，以帮助您完整的跨浏览器语法。

PS：请注意，此工具将生成完整的属性集。其中一些你可能不需要，如果已经是flexbox默认。在这种情况下，您不需要 row 或 nowrap 。它已经是flex默认值。

I am having some issues with flex on the ipad. I want three equally spaced boxes. Its working fine on my ipad, and various browsers (inc safari on desktop) However, some iPads are showing that the boxes have no space between them and are all ranged left. I can't reproduce this however.

Here's the html

<aside id="home-page-postcards" class="home-page-postcards" role="complementary">
  <div class="postcard-wrapper">
    <div class="postcard">...content...</div>
    <div class="postcard">...content...</div>
    <div class="postcard">...content...</div>
  </div>
</aside>

I have this css;

.home-page-postcards {
    background:#fff;
    width:100%;
    padding-top:60px;
    padding-top:35px;
    padding-bottom:40px;
}


.postcard-wrapper { 
        display: -webkit-box;      
        display: -moz-box;         
        display: -ms-flexbox;      
        display: -webkit-flex;     
        display: flex;             

        width:1170px;
        margin:0 auto;

        -webkit-flex-flow: row nowrap;
        flex-flow:row nowrap;

        -webkit-justify-content: space-between;
        justify-content: space-between;
        }

.postcard {
    width:31.2%;
    font-family: 'Belleza', sans-serif;
    font-size:20px;
    line-height:1.3;
}

解决方案

That is because you are missing the 2009 -webkit-box syntax for justify-content: space-between. Older iPads with Safari < 6.1 need -webkit-box-pack: justify;.

For flexbox back-compat, you need to use the 2 additional syntaxes for all non-default properties, including -moz- and -ms- prefixes for all browsers.

Your wrapper should be:

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;

See this demo and flexbox generator for help with your complete cross-browser syntax.

PS: Note that this tool will generate the full set of properties. Some of which you may not need, if already the "flexbox" default. In this case you don't need row or nowrap. It's already the flex default.

这篇关于css flex布局不工作在一些iPad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！