'display: inline-flex' свойство не работает в браузере Safari

Question

Я хочу выровнять 20+ изображений в одной строке (горизонтально). Свойство inline-flex, работающее в Firefox и chrome, ожидает сафари.

<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

использовать этот код

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

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

Answer 2

Там в браузер специальное расширение на инлайн-Flex. Вам необходимо:

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

Answer 3

Не все браузеры полностью поддерживают это свойство. Попробуйте 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+ */ 
} 

Answer 4

использовать для основного контейнера

white-space: nowrap; 
width: auto; 

использования для элементов

display:inline-block;