KA
странное желание добиться адаптива без media запросов)
не всегда, но можно добиться такого. Если сайт шаблонный, то думаю реально
Size: a a a
2020 July 23
l
не всегда, но можно добиться такого. Если сайт шаблонный, то думаю реально
я не спорю , что можно, но иногда легче написать медиа, пару лишних строк)
BB
Почему я еще не хочу медиа делать, так потому что у меня есть общий контейнер (для vue.js приложения, хотя это не важно) у которого 95% ширина и отступ слева 2.5%
И что бы медиазапросами менять ширину тех элементов, нужно как-то вычислить 256px*2+все отступы родительских контейнеров
И что бы медиазапросами менять ширину тех элементов, нужно как-то вычислить 256px*2+все отступы родительских контейнеров
KA
я не спорю , что можно, но иногда легче написать медиа, пару лишних строк)
+
BB
И не хочется быть зависимым от одного в разных местах
BB
лучше сделай кодепен, так нагляднее будет
Я просто с тф, не могу зайти с ноута
l
Какой-то велосипед у тебя получился, но легче скинуть код, для наглядности)
ZA
Пипл, подскажите решение
У меня есть флекс контейнер (желтый) в нем два элемента, у каждого минимальная ширина есть, если ширина контейнера > суммы этих минимальных размеров, то они будут делить место по ровну т.е. 50% и 50%
Но если же контейнер сжимается и там не хватает места, то элементы должны стать в колонку и занимать всю ширину
Я пробовал использовать flec-wrap: wrap; для переноса когда нехватает места, и это работает, если задать ширину элементов как 50%, но тогда, если они встают в колонку, они не занимают 100% (т.к. установлено 50) а делать медиа квери не очень хочется, и уж тем более джсом писать все
У меня есть флекс контейнер (желтый) в нем два элемента, у каждого минимальная ширина есть, если ширина контейнера > суммы этих минимальных размеров, то они будут делить место по ровну т.е. 50% и 50%
Но если же контейнер сжимается и там не хватает места, то элементы должны стать в колонку и занимать всю ширину
Я пробовал использовать flec-wrap: wrap; для переноса когда нехватает места, и это работает, если задать ширину элементов как 50%, но тогда, если они встают в колонку, они не занимают 100% (т.к. установлено 50) а делать медиа квери не очень хочется, и уж тем более джсом писать все
Гриды в помощь
ZA
Они такое делают
BB
Тоже думал, но нормас ли поддержка гридов сейчас?
ZA
Тоже думал, но нормас ли поддержка гридов сейчас?
Если не надо ие, то да
Если надо, то просто сделай подпорки флексовые с помощью @supports
Если надо, то просто сделай подпорки флексовые с помощью @supports
AP
Тоже думал, но нормас ли поддержка гридов сейчас?
да
ZA
Тоже думал, но нормас ли поддержка гридов сейчас?
Тут есть вроде как раз то, что тебе нужно, поищи
https://1linelayouts.glitch.me
https://1linelayouts.glitch.me
BB
Понял, спасибо!)
ZA
Тоже думал, но нормас ли поддержка гридов сейчас?
Если там нет, то просто гугли minmax, чисто твой кейс
BB
Тут есть вроде как раз то, что тебе нужно, поищи
https://1linelayouts.glitch.me
https://1linelayouts.glitch.me
Второй пример сработал идеально, спасибо большое
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
BB
Минут несколько строк на медиа запрос, и минус три строки старого решения
ZA
Второй пример сработал идеально, спасибо большое
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
👍
ZA
Второй пример сработал идеально, спасибо большое
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
Но гридами это реально в одну строчку делается)
AP
Второй пример сработал идеально, спасибо большое
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
Нужно было дать элементам flex: 1 1 <минимальная ширина> а я давал родителю flex-grow и мин ширину напрямую ставил
если блоки не должны быть меньше 256, то нужно
flex: 1 0 256px