Justify-content space-between 的值不适用于 iOS Chrome 和 Safari 浏览器

Question

其他 SO 帖子 like this 没有解决我们在 iOS Chrome 和 Safari 浏览器上使用 justify-content 的问题。使用 space-between 值时，内容在 parent 容器内分布不均匀。

正如您从 this JSFiddle 中看到的那样，justify-content 属性在桌面上按预期工作，但在移动设备上却不行。

我们在 iOS 8.x 上尝试了 Chrome 和 Safari，但都没有均匀分布 children。

代码：

<div id='app_page'>
    <div class='button_box'>
        <div class='share_icon'></div>
        <div class='share_icon'></div>
        <div class='share_icon'></div>
        <a href='/' class='download' target='_blank'>GET</a>
    </div>
</div>

#app_page { width: 100% }

#app_page .button_box { 
    width: 100%; 
    box-sizing: border-box; 
    display: flex; 
    justify-content: space-between;
}

#app_page .button_box .download { 
    vertical-align: top; 
    background: black; 
    width: 36px; 
    height: 36px; 
    line-height: 36px; 
    display: inline-block; 
    color: #fff; 
}

#app_page .button_box .share_icon { 
    cursor: pointer; 
    display: inline-block; 
    background: black; 
    height: 36px; 
    width: 36px;
}

Answer 1

对于 iOS 9.0 以下的 Webkit 浏览器，您需要使用供应商前缀：

display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;

您的代码段：

#app_page { width: 100% }

#app_page .button_box { 
    width: 100%; 
    box-sizing: border-box; 
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#app_page .button_box .download { 
    vertical-align: top; 
    background: black; 
    width: 36px; 
    height: 36px; 
    line-height: 36px; 
    display: inline-block; 
    color: #fff; 
}

#app_page .button_box .share_icon { 
    cursor: pointer; 
    display: inline-block; 
    background:black; 
    height: 36px; 
    width: 36px;
}

<div id='app_page'>
    <div class='button_box'>
        <div class='share_icon'></div>
     <div class='share_icon'></div>
     <div class='share_icon'></div>
  <a href='/' class='download' target='_blank'>GET</a>
 </div>
</div>

Answer 2

尽管 Safari 9 支持所有标准 flex 属性，但对于 Safari 8 及更早版本，您需要使用供应商前缀。

要快速添加您需要的所有前缀，post 您在左侧面板中的 CSS：Autoprefixer.

有关 flexbox 浏览器支持的详细信息，请参见此处：http://caniuse.com/#search=flexbox

Justify-content space-between 的值不适用于 iOS Chrome 和 Safari 浏览器

Justify-content value of space-between not working for iOS Chrome and Safari browsers

html

css

ios

flexbox