<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;
}
.container::after {
content: "";
flex: 0 1 32.7%;
}
div > div > div > div > img{
margin: 10px 10px 10px 10px;
height: 100px;
}
div{
text-align: center;
}
Utilizing flexbox in the container element of my VueJs application helps to rearrange misfitting boxes into the next rows. However, due to compatibility issues with older browser versions on TVs, I am unable to fully utilize the flex-flow property. This results in items overflowing off the screen. The desired output should resemble the image below:
https://i.sstatic.net/9PkHw.jpg
Unfortunately, the actual output on the device is different: