I am working with a list ol that contains items styled as shown below:
ol {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 400px;
}
li {
width: 120px;
height: 120px;
}
Currently, I have 3 items fitting on one row due to the use of justify-content: space-between. However, the alignment of the second row is not ideal since it has only two items. My goal is to position them as if there was a 6th element present (without any gaps between them and left aligned).
Is there a way to achieve this using flexbox, or should I consider introducing an invisible 6th element?