введите описание изображения здесь Я получил стек простой вещью ... Я пытаюсь создать простую навигацию для моего нижнего колонтитула. Итак, я создал и поместил в нее. Список содержит три
с, и каждый из них имеет внутреннюю часть. Я хочу, чтобы мои элементы списка располагались горизонтально с пробелами между ними или вокруг них. Таким образом, я решил использовать flexbox в этом случае. Вопрос в том, что когда я устанавливаю значение свойства отображения my для flex и justify-content по центру, оно работает предсказуемо (т. Е. Все элементы списка, прикрепленные друг к другу, центрируются горизонтально), как только я устанавливаю justify-contentна «пробел между» или «пробел вокруг» я получаю дополнительный пробел с правой стороны моего контента, что делает это пространство в три раза больше, чем с левой стороны от контента. Я пытался найти эту тему в истории, но ничего подобного не нашел. Поиск в Google принес мне потенциальное решение - установить flex: 1 для каждого элемента списка. Но в этом случае я теряю промежутки между предметами, что не является моим намерением. Ниже я предоставляю картину проблемы и мои фрагменты кода тестирования. Еще одно наблюдение заключается в том, что все прекрасно работает в программах с фрагментами кода (JSFiddle или Code Pen) ...
Иллюстрация проблемы * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.footer {
height: 100vh;
background: grey;
position: relative;
}
.container {
width: 90%;
height: 30vh;
margin: auto;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.nav {
background: white;
height: 100%;
}
.list {
height: 100%;
list-style-type: none;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.item {
min-width: 30%;
background: grey;
}
<div class="footer">
<div class="container">
<nav class="nav">
<ul class="list">
<li class="item"><a href="">1</a></li>
<li class="item"><a href="">2</a></li>
<li class="item"><a href="">3</a></li>
</ul>
</nav>
</div>
</div>