Чем заменить calc()?

Question

[Александр]

Типичная задача. Нужно что бы элементы были в три колонки а между ними статическое расстояние в 20 пикс. Как вариант, задать элементам
width: calc((100% - 40px) / 3);
и для всех, кроме каждой третьей
margin-right: 20px;
Но насколько это лучший вариант? Вот caniuse.com/#feat=calc показывает, что всего 84% поддерживает calc().
Как это лучше сверстать? Возможно, на flexbox?

Comments

[Ярослав Иванов]

Статистику бы посмотрели, что за оставшиеся 16%.

[Ярослав Иванов]

Некробраузеры и operamini с uc, которые тоже мертвы.

Answer 1

[iBird Rose]

а чем тебя не устраивает к примеру метод как у bootstrap 3. у элементов справа и слева паддинги по 10px в твоем случае. а для обертки magrin-left: -10px; и margin-right: -10px;

Comments

[Александр]

Спасибо, можно, просто больше html кода, особенно когда десятки элементов - мне придется тогда их в свои обертки с паддингами вставлять.

Answer 2

[archelon]

можно использовать box-sizing: border-box и паддинги.

Answer 3

[dom1n1k]

В принципе, calc тут нормальное решение. С учетом префиксов, он покрывает почти все браузеры. А для немногочисленных остальных - легко и просто фолбечится (будет менее красиво, но приемлемо). А флекс фолбечится более трудоемко и намного менее надежно (если вам действительно нужные старые браузеры).

Comments

[Александр]

Прикол в том, что 5% юзеров с Оперы мини, где не поддерживается calc, тоже важны.) А так да, calc крутой.

[dom1n1k]

Ну и все фолбечится. Просто сделать допустим по 30%, а остальное как-то на отступы раскидать. Да, не совсем красиво, но в целом всё работает и читается. А вот нормально зафолбечить flex-wrap уже намного сложнее.

[Александр]

phpuser: понятия не имею, но эти люди нам тоже нужны, раз их 5%)

[Лариса]

dom1n1k: а фолбечится это fallback или как это корректно в оригинале?

[dom1n1k]

Лариса: Да