html - Justify-content value of space-between 不适用于 iOS Chrome 和 Safari 浏览器

Question

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

从this JSFiddle可以看出，justify-content 属性在桌面上按预期工作，但在移动设备上不工作。

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

代码:

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