UI-компоненты №12. Блок, выходящий за контейнер

[@a_zhary]

Гениально! 👍 Частенько стали попадаться такие макеты. Это лучшая реализация по сравнению со всякими absolute в контейнере и другие качели. Недавно прям подумал вот бы от тебя объяснение на эту тему появилось и вот видос. Очень нравится твой подход. Пойду переверстаю первый экран)))

[@maxgraph]

Спасибо)

[@_Fantom_.]

Это то, что я давно искал, спасибо! Мега полезный лайфхак! Не сразу понял, как работает эта формула, но все же разобрался.. И что важно, то, что она достаточно простая..

[@maxgraph]

Отлично))

[@niceman5890]

Спасибо мужик!

[@maxgraph]

Пожалуйста)

[@МаргаритаПустоселова-й6н]

Это бомбически классно💥💥💥

[@BrestSouth]

Спасибо тебе огромное, что находишь время для ликбеза.

[@maxgraph]

Пожалуйста)

[@ИванТарчевский-и2ч]

Материал - бомба. Обязательно использую в своей сборке!

[@maxgraph]

Спасибо)

[@super_snejinka]

Макс, ты большой молодец!

[@maxgraph]

спасибо)

[@Doldskey]

Максим, как всегда на высоте! Спасибо 🙏🏻

[@maxgraph]

Пожалуйста)

[@ob7349]

Круто!

[@maxgraph]

Спасибо)

[@ShocKKKKKKK]

Спасибо, полезно)

[@maxgraph]

Пожалуйста)

[@Uncaught_in_promise]

Очень полезная фича. спасибо

[@maxgraph]

Пожалуйста)

[@alexandrgusletsov2567]

display flex flex-shrink 0 margin-right 30 padding-left 15 max(15, calc ( )) ! Я запомнил ! Спасибо

[@maxgraph]

Пожалуйста)

[@snegosvin6815]

А если этот блок нужно вывести за пределы контейнера и он находится между всеми остальными блоками, которые в рамках контейнера должны были быть?

[@summersbyy]

Каеф, куда гибче чем танцы с бубнами, абсолютами и 76-ю обертками)

[@maxgraph]

Спасибо)

[@wireinet]

Оригинальное решение ) спасибо!

[@maxgraph]

Пожалуйста)

[@flashback8504]

Боже спасибо 🙏🙏🙏

[@maxgraph]

Пожалуйста)

[@Reaper-zh7si]

Очень круто! Т.к. я новичок в этом деле, долго бодался с такого рода макетом, а оказывается есть такой лёгкий способ)

[@maxgraph]

Спасибо)

[@Bassenhouse]

Спасибо!

[@maxgraph]

Пожалуйста)

[@shp-o4p]

отличное решение!

[@maxgraph]

Спасибо)

[@snegosvin6815]

Максим здравствуйте! А можно ли расширить этот самый блок, не исключая его из контейнера? (сейчас в качестве финальной работы по веб-верстке делаю сайт W-Wave Radio)

[@maxgraph]

Можно по идее той же формулой, но отрицательный маргин лефт сделать

[@ЮлияРо-ы5ы]

А как сделать, чтобы на экранах меньшего размера правая часть начала прилипать к краю и блок чтобы мог уменьшаться. То есть если справа будет картинка и на большом экране она за пределами контейнера, но при меньшем экране чтобы эта картинка равномерно уменьшалась?

[@fili_9485]

1:50 а почему правому блоку нельзя просто flex grow написать, а не указывать и считать проценты?

[@maxgraph]

Можно)

[@super_snejinka]

Макс, столкнулась с тем что я не могу в css использовать ф-ю max, на просторах инета нашла что-то вроде: Нет, ты не можешь. max()и min()были удалены из значений и единиц измерения CSS3. Однако они могут быть повторно представлены в значениях и единицах измерения CSS4 . В настоящее время для них нет спецификации, и в calc()спецификации не упоминается, что они допустимы внутри calc()функции. То есть когда я пишу фунскцию в таком виде как у тебя, scss просто выдает ошибку. Почему у тебя работает?))

[@maxgraph]

Привет, а можно конкретнее, что за код вообще, верно ли все написано? надо глянуть)

[@super_snejinka]

@@maxgraph не дает вставлять скрины, но код вот: padding-left: max(15px, calc((100% - 1718px) / 2));, и тут же галп выдает ошибку: messageFormatted: app\scss\style.scss Error: "calc((100% - 1718px) / 2)" is not a number for `max'. Я пишу в scss, и может это при переводе в css так глючит, но вот погуглив нашла что в css3 эта ф-я не работает. Я нашла выход их ситуации конечно через медиа запрос, но странно

[@maxgraph]

@@super_snejinka странно. у меня вроде в scss все ок. Возможно в scss есть какой-то свой max, и он конфликтует с обычным. Ну тогда да, медиа-запрос решит проблему

[@adamaxelot]

А что насчет поддержки на сафари проблем нет?

[@maxgraph]

Нет

[@k0rsoYD]

Не совсем понял, где могут использоваться такие моменты, возможно ещё не встречал таких макетов та и запомнить на будущее ничего не мешает. Спасибо!

[@maxgraph]

Пожалуйста)

[@Александр-т3в6д]

очень часто используется, например, в левой части может быть какой нибудь текст, а в правой изображение, растянутое к краю страницы

[@JohPeach]

Что за бред, видео называется "Блок, выходящий за контейнер" и на первой минуте автор говорит - "Удаляем контейнер он нам не понадобиться". Просто гениально

[@maxgraph]

Так может дальше посмотреть надо?)

[@YarkiiYa]

Максим, привет, очень крутое видео. Ссылка в git ведет на 11 UI-компонент, а для 12 нет вообще ((

[@maxgraph]

Мой косяк, забыл обновить) посмотрите минут через 10 ссылку, обновлю

[@lalilioo]

Классный видос! Как сделать такой же курсор ?

[@maxgraph]

Какой курсор, не понял))

[@stainerframe7607]

я в таких случаях пересчитую размеры на vw

[@makona79li2]

Спасибо!!!

[@maxgraph]

Пожалуйста)