Flexbox альтернатива flexbox для более ранних версий браузеров

Question

<template>
  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div v-for="(channel,index) in channels" :key="index">
        <div v-if="channel.ChName">
          <img
            :src="'http://uyanik.tv/conf/images/'+channel.Image"
            :class="{selectedIndex:currentIndex === index}"
            :ref="index"
          />
        </div>
      </div>
    </div>
  </div>
</template>

.container {
  display: flex;
  flex-flow: row wrap;
  /*min-width:1200px;
  overflow-x:auto;      */
  justify-content: center;
}
.container::after {
  content: "";
  flex: 0 1 32.7%;
}
div > div > div > div > img{
  margin: 10px 10px 10px 10px;
  height: 100px;
}
div{
  text-align: center;
}

В моем приложении VueJs есть контейнер, который использует flexbox для переноса неподходящих блоков на следующие строки. Проблема заключается в том, что приложение будет использоваться в телевизорах, которые используют более ранние версии браузеров. Таким образом, я не могу использовать свойство flex-flow, так как старые версии частично поддерживают flexbox. Прямо сейчас, элементы переполняются на внешний экран. Я должен отобразить элементы, как в выводе ниже:

Но я получаю этот вывод в устройстве:

Answer 1

Вы можете использовать float или inline-block, чтобы получить этот желаемый макет, см. Пример ниже:

div {
  width:100%;
  padding:0 15px;
}

div img {
  float:left;
  margin:10px;
}

<div>
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
  <img src="http://placehold.it/100x100" />
</div>

JSFiddle