Как задать расстояние между двумя блоками в резиновом макете?

Question

[eugene159]

Здравствуйте.

Я написал jsfiddle, в котором наглядно видна проблема. и описан вопрос Вот ссылка:
https://jsfiddle.net/a526dqk3/

На всякий случай пишу вопрос еще и сюда.
Есть два блока. Они во flex-контейнере, у которого такие свойства:

display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 550px;

Если сжимать экран, то flex-контейнер уменьшается, блоки приближаются друг к другу.

Как мне задать расстояние между 1ым и 2ым блоками? Чтобы при сжимании экрана они никогда не коснулись друг друга.

Я задал для 1го блока margin-right. Все работает, как я хочу, но если уменьшить экран сильнее, то будет заметно, что 1ый блок будет уменьшаться с учетом этого margin. То есть будет "невидимая граница", 1ый блок не касается экрана, но уменьшается.

Вовремя убирать margin-right - это костыль. Потому что на ширину экрана (перенос блоков) влияет скроллбар браузера (а скроллбары по ширине в разных браузерах разные), уровень увеличения (если отдалить страницу, то скроллбар останется таким же, а элементы станут меньше. Получится, что скроллбар стал больше. И наоборот - если приблизить страницу, скроллбар станет меньше). Да и придется отлавливать этот самый момент, это уже не резиновая верстка, а верстка на breakpoint'ах (больше кода, который сложно поддерживать, написание которого отнимает время).

Answer 1

[Ankhena]

Использовать column-gap, если устраивает его поддержка для флекса.
Если нет, то заменить flex на grid.

1ый блок будет уменьшаться с учетом этого margin

Для управления сжатием и растяжением у флексов есть flex-shrink и flex-grow.

Answer 2

[Anonimmus]

Gap: размер, однако сафари flex gap не понимает, хотя был придуман раньше грид сетки.

Пробуй grid с column-gap, row-gap.

Comments

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

Все были придуманы раньше чего-то. Просто кто-то идет в ногу со временем, а кто-то продолжает стричь бабло с лохов.