html - '显示 : inline-flex' property not working in safari browser

Question

我想在单行中对齐 20 多张图像(水平方式)。在 Firefox 和 chrome 中工作的 'inline-flex' 属性期望 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;
}

Answer 1

inline-flex 上有一个特定于浏览器的扩展。你需要做的:

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