Как выравнять 5 div по центру на flexbox?

Question

[Alibek Kulseitov]

Нужно выровнять элементы вот так:
Учитывая их фикс ширину и чтобы они были по бокам



Верстаю на бутстрап 4 но что-то не получается на нем сделать то, что нужно.
Пытаюсь сделать без бутстрапа но выходит такая шляпа:
DEMO >>>>>>>>>>>>>>>>>>>>>>>>>
https://codepen.io/anon/pen/ZvONzX

Comments

[Dima Polos]

Так ширина того, что надо и того, что на выходе разная, поэтому и несоответствие.

Answer 1

[Егор Живагин]

Тк justify-content: center; и отступы между блоками руками ( в % или vw для резины)

Comments

[Alibek Kulseitov]

пробовал, так фикс ширина не работает даже и padding когда пишешь между ними они сужаются

[Егор Живагин]

Алибек Кулсеитов, вот так норм ?

Что я сделал:
1) Положил их в один ряд с переносом вместо двух. Ряд выровнял по центру и задал max-width, чтобы в одну "строку" помещалось только 3 карточки
2) Задал margin карточкам
3) Для блока inner убрал height: 100%;

[Alibek Kulseitov]

Егор Живагин, Помогло но, это как костыль кажется. ) неужели флекс бокс не рассчитан на такие моменты)

[Одиночка Айс]

Алибек Кулсеитов, нет, не рассчитан, такое можно с `inline-block` только сделать

[Alibek Kulseitov]

Одиночка Айс, А как с inline-block выровнять по бокам? нельзя же))

[Одиночка Айс]

Алибек Кулсеитов, я вам ответ написал))

[Егор Живагин]

Одиночка Айс, почему не расчитан-то, если решение с флексом и inline абсолютно одинаковое?)

Алибек Кулсеитов, На самом деле, оба формата display скорее не расчитаны на это. Они выравнивают элементы по оси каждого ряда, без оглядки на другие ряды. Здесь любой вариант сведётся к "выровнять по центру и определить отступы". И это не костыль)

[Одиночка Айс]

Егор Живагин, да, но смысл использования флексов отпадает здесь

Answer 2

[Максим Сафаралиев]

Попробуйте justify-content: space-evenly;

Answer 3

[Одиночка Айс]

.hiw__row{
    //избавляемся от флекса полностью и убираем второй .hiw_row, засунув его элементы в первый .hiw_row
    width:100%; //или фиксированная ширина
    margin:0 auto; //если ширина фиксированная
    text-align:center;
    font-size:0; //убираем переносы строк между дочерними элементами
}
.hiw__card{
    margin:20px; //или сколько вам там надо
    display:inline-block;
}

Comments

[Alibek Kulseitov]

Да так же можно сделать с флексбоками) но опять же) проблема тогда придется под каждое разрешение экрана прописывать margin ?)

[Одиночка Айс]

Алибек Кулсеитов, вы можете его в процентах задать как только адаптива начнется, все равно для нее придется все ужимать, переносить и т.д.

[Одиночка Айс]

Алибек Кулсеитов, тем более этот margin служит только для отделения блоков друг от друга, вам больше придется с размерами самих плашек играться

[Одиночка Айс]

Алибек Кулсеитов, и да, с флексами это сделать нельзя, то, что предложили вам абсолютно то же самое, с фиксированной шириной, маргином у карточек