Я хуйов в верстке. Помоги анон, нужно подправить одну хуйню. Есть div'ные карточки с фиксированной шириной, расположенные в flex контейнере, которому применено css свойство: justify-content: space-between т.е. эти карточки заполняют всю ширину страницы с равномерными отступами. Есть проблема - пик2. Как сделать, чтобы если в последнем ряду меньше карточек то они растягивались также какбудто там есть еще недостающее количество карточек.Если проще: из пик2 должно получиться пик3
бамп
С помощью javascript
>>149083633не хотеть его туда тулить. Че кссом нельзя сделать?
А почему бы не сделать их inline-block?
>>149084217нужно чтобы они прымыкали к краям контейнера. И пространство меж ними было равным. Хз может как-то можно это реализовать иными способами, подскажи
>>149084453Окей. Задаешь родителю font-size: 0;(чтобы не было маленьких ненужных отступов).Всем этим дочерним блокам задаешь display: inline-block;margin-right: нужны отступ справа в пикселяхДальше убираешь блок у каждого четвертого элемента block-name:nth-child(4n) {margin-right: 0;
>>149084683Можешь скинуть размер блока, накидаю полностью стили.
>>149083118 (OP)flexbox для пидоров?
>>149084784Схуяли?
>>149084683нихт. Размер блока в котором они расположены - не фиксирован, т.е. он может быть разной width в зависимости от экрана. Количество карточек тоже может быть разным. Фиксирован только маргин-райт у блока внутри которого они располодены
>>149085547Тогда я бы подгонял ширину дочерних блоков в процентах, а маргин справа ставил в пикселях. Ну а вообще лучше бы делал все фиксированным и уже в медиа-запросах прописывал их поведение на нужных разрешениях.
>>149085930Да все н еучесть. Лан спасиб. Бля надо убегать, еще спрошу какнить(
>>149083118 (OP)Научись пользоваться джиесфидлом
>>149083118 (OP)Выводить там блоки с visible hidden?
>>149083118 (OP)дай родителю &:after { content: ""; flex: auto; }
>>149083118 (OP)codepen Дай. Чо как пидор то.
>>149093811https://jsfiddle.net/b5q47cne/поуменьшай окно браузера, увидишь о чем я
>>149096648пик
>>149083118 (OP).main:after {content: "";flex: 0 1 150px;}лови
Не хочешь для каждой строки делать отдельный флекс контейнер? Тогда для последнего особое правило просто применять через ласт чайлд
>>149097809Можно просто flex: auto ящитаю
>>149098971Хотя не, там маргины(
>>149083118 (OP)>justify-content: space-betweenjustify-content: flex-start
Вообще на stackoverflow сказали, что один из костылей, это всегда дописывать столько пустых блоков нулевой высоты, сколько максимум влезает в одну строку. Они схлопываются, но если будет место для них, то они будут учитываться при распределении места на последнем ряду и всё будет тип-топ. В будущем собираются добавить возможность делать такую же хуйню проще через ::after(n)
>>149099059Тогда отступов не будет между блоками
>>149099154но я не знаю сколько блоков будет. Это от ширины экрана зависит
>>149099374Ну у тебя есть максимум ширина контентной области? Вот от неё и пляши. Сколько на сейчас обычно? 1170? Добавишь больше, ничего стращшного не будет вроде. Потести
>>149099455>Потестинихуя https://jsfiddle.net/b5q47cne/1/
Конкретно тут самый не мозгоёбский вариант это наверно >>149097809>.main:after {>content: "";>flex: 0 1 150px;>}
ой пацаны, кто вас так верстать учит
>>149099588Я особо не разбирался, сори, вот короче примерhttp://codepen.io/dalgard/pen/DbnusМожет у тебя хуйня из-за маргинов каких-то, если разберусь - напишу
>>149099270justify-content: flex-start;margin:10px;Только для адаптивки самый живой вариант все равно justify-content: center.
>>149099610если добавляю больше карточек то нихуя
>>149100009мне нужно, чтобы оно прилипало к краям родительского контейнера
>>149100193https://jsfiddle.net/b5q47cne/10/
>>149100280Вот тут вроде работает. Понял как?
>>149083118 (OP)Добивай ряд пустыми прозрачными карточками.
>>149100373Только бэкграунд колор там лишний
>>149100193нет, все правильно там. посмотри стартовые стили.все блоки по умолчанию 150 пикселей, а у тебя поебота на скрине.
>>149100411или даже одной, у окторой flex:x где x количество недостающих карточек.
>>149100466На самом деле действительно поебота получается. Так что смотри мой вариант >>149100280
о, нужный тред.Хакеры, подскажите.Есть грубо говоря div, растянутый на всю ширину и высоту. Нужно заполнить его квадратиками дивами. Как сделать?
>>149100693flexА вообще поподробней задачу объясни
>>149100639пока контейнер не будет ограничен таким хуем работать не будет
>>149100639https://jsfiddle.net/b5q47cne/19/
>>149100280>>149100411Вроде работает. Но мне не нравится, т.к. я не знаю сколько карточек может влазить в ряд - на разных мониторах по разному может быть. Хотя ща подумал, можно же сколько хочешь? Высота же - 0, т.е. скролл не будет появлятся
>>149100760Нужно сделать визуально как пикрел. Только каждая ячейка - div. И при изменении размеров родительского поля, все положения дивов и их кол-во остается неизменным, а размер меняется.
>>149100987Достаточно одного пустого с flex:0 >>149100905и не важно сколько будет в ряду
>>149100894Больше пустых блоков. Я же сказал. Берёшь мак сайз области, делишь на минимальную ширину одного блока, вот сколько пустых заглушек тебе надо.
>>149101182Одной достаточно.
>>149100987>>149100905такая проблема. Сделал ширину 50px; Осталось свободное пространство в одной строке занимаемое этими пустыми блоками. Т.е. ели у кого-то монитор будет подлиннее, то блоки не будут стыковаться к краям контейнера
>>149101389