web-dev-qa-db-fra.com

La propriété 'display: inline-flex' ne fonctionne pas dans le navigateur Safari

je veux aligner plus de 20 images en une seule ligne (de manière horizontale). Propriété 'inline-flex' fonctionnant dans Firefox et Chrome expect 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;
}

htmlcsssafari
12
Mahee

Il existe une extension spécifique au navigateur sur inline-flex. Tu as besoin de faire:

display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
31
Manish Champsee

utiliser pour conteneur principal 

white-space: nowrap; 
width: auto;

utiliser pour les articles

display:inline-block;
3
sony litt

utiliser ce code

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

Fiddle: http://jsfiddle.net/nikhilvkd/p6LKy/1/

1
Krish

Tous les navigateurs ne supportent pas totalement cette propriété. Essayez ce CSS pour un support supplémentaire:

.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+ */
}
0
ninjaPixel