No video
Простая адаптивная флекс-сетка с помощью calc
Рет қаралды 4,771
Күн бұрынПривет! В этом видео расскажу о своем способе создания флекс-сетки с помощью calc.
codepen.io/Max... - код из видео
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Поддержать канал: boosty.to/maxg...
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_...
#обучение #css #flex
@user-qu9yl6bv6m 6 ай бұрын
это аналог fr в гридах, я встречал такую формулу у чувака, только он на scss писал, ну и считал вручную пробелы, а не -1
@user-wf4np1ne2c Жыл бұрын
Только что попробовал твою формулу, работает даже без медиа запросов👍
@blackcelebration3588 Жыл бұрын
Красиво. Да, когда стало возможно производить арифметические операции прямо в CSS файле, это был прям прорыв.
@alexdreamer11 Жыл бұрын
Спасибо. Очень полезный видос👍
@user-ek7yc3zj7n Жыл бұрын
Вагон лайков за такой полезный видос!!!! Спасибо! Видел подобное на канале «фрилансер по жизни», но у Вас гораздо понятнее и интереснее! Спасибо Вам!
@stanislavosipkin Жыл бұрын
Отличная сетка, спасибо!
@gogo-jr3im Жыл бұрын
Спасибо! Полезная штука!
@dukecca Жыл бұрын
Великолепно! Спасибо)
@evgeny-fk1fj 2 ай бұрын
кайф
@diamondserg-43 Жыл бұрын
гениально
@user-wf4np1ne2c Жыл бұрын
Неплохо👍
@Tiburtsy 3 ай бұрын
Оказалось что получить height=width * 1.5 невозможно, даже сохранив ширину во временную переменную . Как быть в таком случае?
@Deathik Жыл бұрын
Сразу вспомнился смартгрид с его флексбокс сетками
@TheError220 Жыл бұрын
С этим примером отлично справятся гриды
@maxgraph Жыл бұрын
Очевидно
@ozimnadius Жыл бұрын
Если добавить justify-content:center, то уже не справятся
@виртуоз_ру Жыл бұрын
Прикольная штука. Спасибо дружище.
@user-lj1to7le9w 11 ай бұрын
Мне, не опытному масленку, любопытно есть ли у такой сетки преимущество перед гридами?
@maxgraph 11 ай бұрын
Это разные решения, которые и сравнивать не нужно) но то же самое можно сделать на гридах
@AntonioBenderas Жыл бұрын
Я думал во флексах и так есть реализация такого плана flex: 1 0 30%; только менять значения этих единиц
@maxgraph Жыл бұрын
Это не точное определение размера. Не учитывается отступ.
@woundedwhale Жыл бұрын
@@maxgraph Да, но можно задавать отступы вложенному элементу. Т.е. для "контейнера" указываем, к примеру, flex: 0 1 50%, а отступы задаем вложенному в этот контейнер диву. Тогда все размеры будут точными
@Davudyk92 8 ай бұрын
Хотелось бы посмотреть как ето работает на реальном проекте а не с кубиками которые сам прописал.
@maxgraph 8 ай бұрын
Точно так же
@PupkinRytp Жыл бұрын
@MaxGraph, подскажи плз, в твоей последней сборке gulp можно делать многостраничный сайт, если да, то как?
@maxgraph Жыл бұрын
Да так же как одностраничный) создаешь новые страницы в корне src и все
@mister_andre Жыл бұрын
Спасибо за видео) Всегда делаете интересный контент) Меня уже некоторое время интересует один вопрос. Попался мне веб-сайт, у которого слайдер реализован на библиотеке owl carousel, слайд этого сайта состоит из 6 изображений и таких слайда три, но на мобильных устройствах в слайде становится 2 изображения, а самих слайдов становится 9. Может вы подскажете как возможно это реализовать ?🤔
@TheError220 Жыл бұрын
У Макса есть отличные уроки по Swiper js там такое можно реализовать.
@vostokof Жыл бұрын
Да. Как выше сказано, в swiper можно в js прописать количество слайдов для разного разрешения экрана
@INTTable Жыл бұрын
Максим, ну когда уже видосы по wintrCMS, мы же ждем)
@maxgraph Жыл бұрын
как и обещал, до конца февраля будет
@vipdeveloper Жыл бұрын
Привет, А как насчет сделать лендинг с rtl, справа налево контент
@maxgraph Жыл бұрын
Привет. Можно подумать про это, но таких макетов вообще не встречал
@GCranK0 Жыл бұрын
Записаться шоль в скиллбокс)))
@maxgraph Жыл бұрын
почему бы и нет :)
@volgaDev Жыл бұрын
а как же поддержка gap
@maxgraph Жыл бұрын
Поддержка уже достаточная
@user-xt1ns1br7o Жыл бұрын
А зачем это нужно если есть grid auto-fill? И никаких медиа писать нужно, разве что gap
@maxgraph Жыл бұрын
Потому что можно
@user-fb3wj9ge2t Жыл бұрын
если например планшет поворачивать, будет работать?
@maxgraph Жыл бұрын
Конечно
@iGotton Жыл бұрын
Это хорошо, но зачем, когда есть grid? Опять же, тут всё заложено на gap, а это для флекса слишком модерновая фича, чтобы её в прод тащить.
@philstar102 Жыл бұрын
Про грид согласен, но gap вообще не модерновая фича)) Бро 92%
@maxgraph Жыл бұрын
Затем, что можно)
@ozimnadius Жыл бұрын
А ты попробуй выровнять по центру 2 последних элемента, например в 3 колоночной сетке на гридах и поймешь зачем.
@iGotton Жыл бұрын
@@philstar102 8% юзеров лесом? У меня заказчик 3% поддерживает, чтоб ты понимал. Это 14.0 сафари.
@iGotton Жыл бұрын
@@ozimnadius а на видео разве такая вёрстка? Че ты умничаешь не по делу?
@MIRAGEvs Жыл бұрын
Как сделать это на scss с их переменными? ((
@alxkr7937 Жыл бұрын
Тут же принцип в том, что ты переопределяешь значения переменных на брейкпоинтах. Scss переменные не получится так переопределять, но ты можешь использовать css переменные в scss файле
@maxgraph Жыл бұрын
Я считаю что css-переменные круче. Поэтому зачем?)
@kenzie- Жыл бұрын
Когда-нибудь на CSS можно будет нейросеть написать
@Atractiondj Жыл бұрын
Так все запудрено, ребят на кой х... вы усложняете себе жизнь? Да возьми ты CSS grid и используй grid-template-columns: repeat(auto-fit, minmax (значения) и не плодите лишнего кода.
@izzy7541 Жыл бұрын
В видео не говорится что это панацея. Просто один из кучи способов как сделать сетку на флексах. Есть довольно не мало проектов где люди не могут до сих пор использовать гриды. Подобные способы им будет полезно знать. А если у вас есть возможность использовать гриды в проекте, смело юзайте
@maxgraph Жыл бұрын
Зачем вы навязываете что-то людям? Нравится грид - вперед) Я лишь показал один из вариантов флекса, не более.
Cool Items Official
Рет қаралды 53 МЛН
Александр Ламков — Friendly Frontend
Рет қаралды 11 М.