CSS flex gap, откуда дополнительные px и как с ними бороться?
Приветствую!
Для наглядности создал 2 сетки, 3 и 5 колонок соответственно. В обоих сетках указал gap: 10px. Для размещение колонок в одном ряду - указал ширину колонок равную 100% (ширина ряда) / 3 (количество колонок) = 33.3%, но колонки не поместились в ряд. Через calc убрал несколько пикселей у каждой из колонок, в итоге у 3 колонок получилось calc(33% - 3px), а у 5 колонок calc(20% - 8px).
Update: указал фиксированную ширину родителя в 1000px, 3 колонки по 333px, 5 колонок по 200px.
Откуда дополнительные пиксели, и как это пофиксить?
Привет, школа. Вспоминаем проценты.
Ширина родителя неизвестна.
100% равно 99% + 20px или нет?
Как по-вашему?
Ну или наоборот: при какой ширине контейнера эти выражения будут равны?
Вроде очевидно.. 200px * 5 = 1000px, ваши блоки занимают все доступное пространство, но при этом вы добавляете gap = 10px и получается 200px * 5 + 10px * 4, что в итоге больше 1000px и происходит перенос, если бы перенос был запрещен, то блоки ужались бы в случае отсутствия жадности..
Зачем такие извращения все куда проще
Но для сетки есть более лучшии техники. им не нужно задавать внешнии отступы, а сделать их впритык друг к другу, и уже в ячейках добавлять видимые блоки и давать им отступы. А еще лучше юзать гриды, раз все равно используешь flex-gap
Mike, хз. Времена колонок давным давно прошли. Но насколько я знаю bootstap как раз таки сделан по принципу, что колонки все прилипают друг-другу. И не нужно парится с внешним отступом.
Простой
Средний
