Здравствуйте.
Я написал 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'ах (больше кода, который сложно поддерживать, написание которого отнимает время).
