Flexbox list alignment leaving space between elements on 3 element row

Question

I am having an issues with flexbox list alignment. I have a list of elements displayed over a row of 3. But on a row with 2 elements there is a space in the middle.

I aim aiming for a row with only 2 elements to look like x x o. However my code leave the elements like this x o x. I also note that the elements arent entirely centered to its div.

See below:

Flexbox alignment issue

I have my ul set to:

 display:flex;
    flex-flow: row wrap;
    width:100%;
    justify-content: space-between;
    align-items: center;

and the li with:

{
    color:black;
    font-size:16px;
    margin-bottom:20px;
    width: calc(100% / 3);

Answer 1

The space in the middle is caused by space-between. For that particular row just leave it to follow the normal row without any style. And it will start from the left to the right. If you want to create stuff that follows in that particular order, You can use a grid instead which is easier to do.

ul {
 display: grid;
 grid-template-columns: auto auto auto;
}

This will make it follow in a nice order, just the way you want it.

Or if you still want to use flexbox, for that particular row

ul{
display: flex;
flex-direction: row;
}

li{
width: calc(100% / 3);
}