
- Главная
- Каталог
- Интернет технологии
- Code Ready | Frontend
Code Ready | Frontend
Авторский канал по Frontend разработке.
Статистика канала
overflow: auto, но скролл не появляется, и блок просто вылезает за пределы контейнера.
.layout {
display: flex;
flex-direction: column;
}
.content {
overflow: auto;
}{}
Кажется, всё корректно, но flex-элемент по умолчанию не хочет сжиматься по высоте.
Решение — явно разрешить это:
.content {
min-height: 0;
}{}
Теперь блок может уменьшаться и скролл начинает работать как ожидается:
.content {
min-height: 0;
overflow: auto;
}{}
Если scroll не работает во flex — почти всегда не хватает именно min-height: 0.
• контейнер управляет состоянием через :hover; • все элементы получают сниженный opacity; • активный элемент переопределяет это состояние; • transform усиливает ощущение глубины.Так можно управлять вниманием в списках и панелях без сложной логики.
:hover ведёт себя странно: может залипать, срабатывать после тапа или вообще ломать визуальные состояния. Это особенно заметно в карточках, меню и кнопках.
Обычно стили пишут без условий:
.button:hover {
background: #000;
}{}
И в итоге на мобильных интерфейс начинает вести себя непредсказуемо.
Есть нативный способ разделить поведение устройств:
@media (hover: hover) {
.button:hover {
background: #000;
}
}{}
Теперь hover-эффекты работают только на устройствах, где реально есть курсор.
Можно отдельно настроить поведение для тач-устройств:
@media (hover: none) {
.button:active {
background: #000;
}
}{}
— Плюсы: кодинг, миллион токенов контекста и агентский режим — Минусы: логические ошибки, нужно присматривать в сложных задачахБольше всего зацепила именно работа агента. Решил проверить его на своей «боли» — навел порядок в подписках Telegram. В последнее время лента превратилась в бесконечный шум с постами об одном и том же. Дал задачу нейронке: просмотреть мои подписки, убрать лишнее и оставить только тех, кто пишет про реальный опыт, автоматизацию и внедрение ИИ в работу. Модель сама просканировала каналы и собрала отличную подборку. Результат получился реально адекватным, поэтому делюсь этой подборкой. Авторы, которые каждый день пишут полезные об IT и AI доступно и интересно. Подписывайтесь на лучших Tech-специалистов https://t.me/addlist/81ejyxxH4rM0ZDIy
• На примерах показывается, в каких задачах Flexbox удобнее, а где Grid даёт более чистую и масштабируемую архитектуру;
• Разбираются типичные кейсы верстки, с кодом и объяснением поведения каждого подхода;
• Объясняется ключевая разница: Flex как инструмент для потокового выравнивания и Grid как система для построения структуры интерфейса.
🔊 Продолжайте читать на Habr!
Отзывы канала
- Добавлен: Сначала новые
- Добавлен: Сначала старые
- Оценка: По убыванию
- Оценка: По возрастанию
Каталог Телеграм-каналов для нативных размещений
Code Ready | Frontend — это Telegam канал в категории «Интернет технологии», который предлагает эффективные форматы для размещения рекламных постов в Телеграмме. Количество подписчиков канала в 22.2K и качественный контент помогают брендам привлекать внимание аудитории и увеличивать охват. Рейтинг канала составляет 12.0, количество отзывов – 1, со средней оценкой 5.0.
Вы можете запустить рекламную кампанию через сервис Telega.in, выбрав удобный формат размещения. Платформа обеспечивает прозрачные условия сотрудничества и предоставляет детальную аналитику. Стоимость размещения составляет 2797.2 ₽, а за 9 выполненных заявок канал зарекомендовал себя как надежный партнер для рекламы в TG. Размещайте интеграции уже сегодня и привлекайте новых клиентов вместе с Telega.in!
Вы снова сможете добавить каналы в корзину из каталога
Комментарий