Как сделать постоянно 3 колонки во flexbox, не зависимо от ширины элементов?

Question

[MFNIK]

Добрый день, подскажите пожалуйста как сделать всегда три колонки в родителе имеющий свойство display: flex; не зависимо от ширины элементов.
Сейчас так:

<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

wrapper {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 500px;
}
.item {
width: 30%;
height: auto;
}

Мне нужно что бы не зависимо от ширины элемента item, всегда было 3 колонки по центру с равными отступами.

И объясните дураку, верстаю на bootstrap 3, почему при добавлении class="img-responsive" изображения размером 1000х1000 px оно не сжимается до ширины и высоты контейнера, а выходит за границу, всю голову сломал!

Спасибо!

Comments

[MFNIK]

так ведь стоит это свойство!

[FeST1VaL]

MFNIK, Да я поздно увидел. Так у вас все правильно же? может картинки выходят за границу? сделайте пример в песочнице. Возможно пока делаете поймете в чем проблема) вы же применяете класс на картинку? а не на item?

[MFNIK]

Артем Будин, мне нужно сами элементы сделать в 2 раза меньше чем сейчас, но если я уменьшаю ширину то их в строчку становится не по 3 штуки, почему вылазиет изображение разобрался, нужно тегу img прописать height: 100%, а не auto;

[MFNIK]

Артем Будин, пока решил вопрос padding: 70px; все элементы естественно уменьшились, но мне кажется есть специальное решение, а не этот велосипед.

[FeST1VaL]

MFNIK, нефига не понятно) так родителю дайте ширину. Он же относительно родителя т.е wrapper

[MFNIK]

Артем Будин, хотя padding тоже не работает корректно, вот что получается

[MFNIK]

Артем Будин, у него ширина 100%;

[FeST1VaL]

MFNIK, так у вас высота стоит 500px фиксировано. Уберите высоту...

[MFNIK]

Артем Будин, так мне и нужно высоту 500px, я не пойму почему элементы не сжимаются под высоту?

Answer 1

[Шохрух Шаймардонов]

.wrapper {
/* Добавьте строку ниже */
justify-content: space-between;
}

Тут сам изучал про flexbox. Достаточно подробно и понятно расписано