在不适用于iOS Chrome和Safari浏览器之间验证空间的内容价值

Question

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

正如您从这个JSFiddle中看到的，justify-content属性在桌面上可以正常工作，但在移动设备上则不然。

我们在iOS 8.x上尝试了Chrome和Safari，但都没有平均分配孩子。

代码：

<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及更早版本中，您需要使用供应商前缀。

要想快速添加所需的所有前缀，请在左侧面板中张贴您的CSS：Autoprefixer。

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