Html 'display: inline-flex' 属性在 safari 浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21772825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'display: inline-flex' property not working in safari browser
提问by Mahee
i want align 20+ images in single line (horizontal manner). 'inline-flex' property working in Firefox and chrome expect safari.
我想在单行（水平方式）中对齐 20 多个图像。'inline-flex' 属性在 Firefox 和 chrome 中工作，期待 safari。
<div class="rl-collection-img content" >
<div class="rl-images_container">
<img alt="" src="/staticassets/images/home/collections/blue/1.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/2.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/3.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/4.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/5.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/6.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/7.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/8.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/9.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/10.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/11.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/12.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/15.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/16.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/17.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/18.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/19.jpeg" />
<img alt="" src="/staticassets/images/home/collections/blue/20.jpeg" />
</div>
</div>
<style>
.content{
width:100%;
}
.rl-images_container{
display: inline-flex;
}
回答by Manish Champsee
There's a browser specific extension on inline-flex. You need to do:
inline-flex 上有一个特定于浏览器的扩展。你需要做：
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
回答by sony litt
use for main container
用于主容器
white-space: nowrap;
width: auto;
use for items
用于物品
display:inline-block;
回答by Krish
use this code
使用此代码
.content{
width:800px;
}
.rl-images_container{
width: auto;
}
.rl-images_container img{
width:30px;
float:left;
}
回答by ninjaPixel
Not all browsers fully support this property. Try this CSS for added support:
并非所有浏览器都完全支持此属性。试试这个 CSS 以获得更多支持：
.flex-container {
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -moz-box; /* Firefox 19 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Chrome */
display: flex; /* Opera 12.1, Firefox 20+ */
}
.flex-item {
-webkit-box-flex: 1; /* iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Opera 12.1, Firefox 20+ */
}
