1 
<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>

<style scoped>
.selectedIndex {
  border: 5px solid;
  border-color: aquamarine;
  opacity: 0.8;
  transition: 0.2s;
}
.container {
  display: inline-block;
  /*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;
  height: 100px;
  float:left;
}
div{
  text-align: center;
}
div > div > div{
  width:100%;
  padding:0 10px;
}
@media only screen and (max-width: 1199px) {
  .container::after {
  content: "";
  flex: 0 1 38.7%;
}
}
</style>

这是我的风格和模板。如果我只是启用flex-flowand wrapping，它不会按预期工作，因为项目会流出到外部屏幕。如果我用其他一些 CSS 属性替换它block-inline，它会像包装一样对齐，但运行速度太慢。我能做些什么来解决这个问题吗？

4

0 回答 0