css flex布局在某些iPad上不起作用

Posted 2023-03-12

【中文标题】css flex布局在某些iPad上不起作用

【英文标题】：css flex layout not working on some iPads

【发布时间】：2016-05-18 10:25:44

【问题描述】：

我在 ipad 上遇到了一些 flex 问题。我想要三个等距的盒子。它在我的 ipad 和各种浏览器（包括桌面上的 safari）上运行良好。但是，一些 iPad 显示这些盒子之间没有空间，并且都在左边。但是我无法重现。

这是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>

我有这个 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;

【问题讨论】：

只是添加这样的媒体查询：@media (max-width:1171px) .postcard-wrapper width:100%;...

【参考方案1】：

那是因为您缺少 justify-content: space-between 的 2009 -webkit-box 语法。带有 Safari -webkit-box-pack: justify;。

对于 flexbox back-compat，您需要为所有非默认属性使用另外两种语法，包括所有浏览器的 -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;

请参阅此demo and flexbox generator 以获取有关完整跨浏览器语法的帮助。

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