Simple Flexbox Example

by mrcl

HTML

<ul class="flex-container">
    <li class="flex-item">
    <picture>
      <img src="https://www.swr.de/home/importe/Yucca%2C1546434189297%2Ckaffee-oder-tee-image-722~_v-16x9@2dS_-6be50a9c75559ca1aaf1d0b25bae287afdcd877a.jpg">
      
     <span class="platform">Y2T</span>
     <span class="type">V</span>
    </picture>
    </li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.flex-item {
    background: tomato;
    padding: 0px;
    width: 200px;
    height: 200px;
    margin-top: 10px; 
    color: white;
    font-weight: bold; 
    text-align: center;
}

picture { position:relative; }

picture .type { position:absolute; font-size:12pt; height:20px; width:20px; bottom:3px; right:4px; display:inline-block; background-color:rgba(0,0,0,0.7); border-radius:50%; color:white; }
picture .platform { position:absolute; font-size:16pt; height:20px; width:20px; top:3px; left:4px; display:inline-block; background-color:rgba(0,0,0,0.7); border-radius:50%;color:white; }

picture img { position:relative; width:100%; height:100%; object-fit:cover; }