Почему не работает justify-content: space-between (Flex)?

Question

[1739]

Есть задача - сделать одинаковые интервалы между 3-мя картинками в ряду. При этом левая и правая картинки должны быть прижаты к краям. Добавила к родителю свойство justify-content: space-between. Но интервал между картинками не появляется. Что можно поменять в коде? Заранее спасибо!

HTML:








CSS:
.row {
width: 100%;
display: flex;
justify-content: space-between;
}
.col-4 {
width: 33.33%;
text-align: center;
}
img {
width: 100%; //mobile-responsive
}

Answer 1

[Alexander Pushkarev]

Они у вас 33.33% и заполняют всё. Сделайте 33%

Пример - https://codepen.io/AXP/pen/aWOaZe

Comments

[1739]

Спасибо большое! Действительно, получилось!

[Alexander Pushkarev]

1739: отметьте решение

Answer 2

[robotohost]

width: calc((100 / 3) - 5px); минусом корректируем отступ