Расстояние между гибкими элементами?

Question

JSFiddle

У меня есть список, отображаемый с прогибается:

<ul> 
    <li></li> 
    .... 

ul{ 
    list-style-type: none; 
    display: flex; 
    flex-wrap: wrap; 
    background: gold; 
} 

li{ 
    flex-basis: 25%; 
    background:grey; 
} 

Теперь я хочу некоторое пространство между моими Lī элементами, добавлением поля или набивка раздвигает элементы на следующую строку (я хочу гибкий обруч для когда у меня есть более 4 элементов).

Я знаю, что вышеизложенное может быть решено с помощью выбора размеров ящиков, но моя основная проблема заключается в том, что я хочу, чтобы расстояние между элементами, но с первым и последним элементом располагалось слева и справа от родительского элемента.

Как это можно достичь?

например.

|li|spacing|li|spacing|li|spacing|li| 

Answer 1

Проверить это для улицы я использовал calc для регулировки flex-basis, чтобы пользовательские margin сек, что вы можете распределить для ul (используется justify-content: space-between распределения, что запас).

ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    background: gold; 
 
    margin: 10px; 
 
    padding: 0; 
 
    height: 100px; 
 
} 
 
li { 
 
    flex-basis: calc(25% - 20px); 
 
    background: grey; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Позвольте мне знать ваше мнение по этому вопросу. Благодаря!

Answer 2

Вам необходимо понять, что настройка flex-basis: 25%; на 25% даст вам «О» три элемента в строке, в зависимости от длины элементов и размера экрана. Это связано с тем, что вы не считаете, сколько процентов было добавлено.

Уменьшите процент, затем добавьте левую обивку, и она будет работать.

li{ 
flex-basis: 10%; 
background:grey; 
padding-left: 5px; 
}