justify-content value of space-between 不适用于 iOS Chrome 和 Safari 浏览器答案

【问题标题】：Justify-content value of space-between not working for iOS Chrome and Safari browsersjustify-content value of space-between 不适用于 iOS Chrome 和 Safari 浏览器
【发布时间】：2016-02-13 06:00:55
【问题描述】：

其他 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;
}

【问题讨论】：

它在 iOS 9.0 模拟器上的 Safari 和 iOS 9.1 上的 Safari 中工作。
现在无法测试它，但我记得我必须在 iOS 8.x 上为 Safari 移动设备使用供应商前缀来实现 flexbox。更新了小提琴供您检查：jsfiddle.net/3jauqatg/6
@Thomas 修复了它！您能否添加一个答案，以便我们信任您？你真棒;再次感谢！
你也可以投票给迈克尔的答案:)

标签： html ios css flexbox

【解决方案1】：

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

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

你的sn-p：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：