Question

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

从this 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;

您的代码段：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

虽然Safari 9支持所有标准的flex属性，但使用Safari 8及更早版本时，您需要使用供应商前缀。

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

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

对于iOS Chrome和Safari浏览器不适用的空间的内容价值

2 个答案: