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;
}
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.
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.
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.
use for main container
white-space: nowrap;
width: auto;
use for items
display:inline-block;
There's a browser specific extension on inline-flex. You need to do:
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With