Выравнивание списка Flexbox, оставляя пространство между элементами в строке 3 элементов

Question

У меня проблемы с выравниванием списка flexbox. У меня есть список элементов, отображаемых над строкой 3. Но в строке с 2 элементами есть пробел в середине.

Я стремлюсь к тому, чтобы строка с двумя элементами выглядела как xx o. Однако мой код оставляет элементы, подобные этому XO X. Я также отмечаю, что элементы не полностью центрированы относительно его div.

См. Ниже:

Проблема выравнивания Flexbox

У меня установлено значение ul:

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

и li с:

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

Answer 1

Пространство посередине обусловлено пробелом между ними. Для этого конкретного ряда просто оставьте его следовать обычному ряду без какого-либо стиля. И это начнется слева направо. Если вы хотите создать материал, который следует в этом конкретном порядке, вы можете вместо этого использовать сетку, которая легче сделать.

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

Это позволит вам следовать в хорошем порядке, так, как вы этого хотите. .

Или, если вы все еще хотите использовать flexbox, для этой конкретной строки

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

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