Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'display: inline-flex' property not working in safari browser

Tags:

html

css

safari

i want align 20+ images in single line (horizontal manner). 'inline-flex' property working in Firefox and 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;
}

like image 609
Mahee Avatar asked Feb 14 '14 07:02

Mahee


People also ask

Does display flex work on Safari?

display: -webkit-flex; display: -ms-flexbox; display: flex; Does not work in Safari - Version 9.0. 2 (11601.3. 9), but in Chrome and Firefox is ok.

Why my display inline not working?

An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.

Can you use flexbox inline?

You cannot display flex items inline; otherwise you don't actually have a flex layout. It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish.


2 Answers

use for main container

white-space: nowrap; 
width: auto; 

use for items

display:inline-block;
like image 182
sony litt Avatar answered Sep 20 '22 22:09

sony litt


There's a browser specific extension on inline-flex. You need to do:

display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
like image 20
Manish Champsee Avatar answered Sep 18 '22 22:09

Manish Champsee