I am working with a flexbox row containing boxes arranged like this.
https://i.sstatic.net/tkURN.png
My goal is to style radio buttons in a similar way as shown in the image, allowing them to be checked. Can this be achieved?
<ul class="flex-container longhand">
<li class="flex-item">1</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>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.longhand {
flex-flow: wrap row;
}
.flex-item {
color: #C3D0D9;
border: 1px solid #C3D0D9;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
}