用于早期版本浏览器的 Flexbox flex-flow 替代方案答案

【问题标题】：Flexbox flex-flow alternative for earlier versions of browsers用于早期版本浏览器的 Flexbox flex-flow 替代方案
【发布时间】：2020-06-14 15:53:51
【问题描述】：

<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。现在，项目溢出到外部屏幕。我必须在下面的输出中显示项目：

但我在设备中得到了这个输出：

【问题讨论】：

使用浮动或内联块
注意：<img> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。

标签： javascript html css vue.js flexbox

【解决方案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

【讨论】：

注意：<img> 标签不使用也不需要结束斜杠，在 HTML 中也从来没有。
它变得太靠近左侧而右侧变得太空了。我们不能将它们从两边对齐吗？