在Safari浏览器中，“display: inline-flex”属性无法正常工作。

Question

我希望将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;
}

- Mahee

---

请在此处或其他在线编辑器（如jsfiddle）中提供您的代码！ - Krish

"display:inline-flex" CSS 属性在 Firefox 和 Chrome 中有效，但在 Safari 和 IE9+ 中无效。 - Mahee

这里的 display:flex 代码在哪里？ - Krish

抱歉，我没有听懂你说的话 @Nikhilkrishnan - Mahee

Answer 1

有一个与浏览器相关的inline-flex扩展。您需要执行以下操作：

display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;

- Manish Champsee

---

这解决了我在移动Safari中的内联问题...谢谢！ - MizAkita

Answer 2

用于主容器

white-space: nowrap; 
width: auto; 

用于物品

display:inline-block;

- sony litt

Answer 3

使用这段代码。

.content{
    width:800px;
}
.rl-images_container{
    width: auto;
}
.rl-images_container img{
    width:30px;
    float:left;
}

代码演示：http://jsfiddle.net/nikhilvkd/p6LKy/1/

- Krish

---

是的，它很好，但我在使用可变宽度图像，高度只是恒定的。所以我不能在这里使用“宽度”属性。 :-( - Mahee

Answer 4

并非所有浏览器都完全支持此属性。尝试使用以下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+ */
}

- ninjaPixel

---

你可能需要添加一些上下文，以便人们知道为什么它不起作用以及这样做的原因。 - cgreeno