Урок 08. Задания

Задание 1. Панель инструментов

Соберите строку: слева заголовок «Документы», по центру поле поиска, растянутое на всё свободное место, справа две кнопки. На мобильном поле поиска должно оставаться удобным — не менее половины ширины.

Задание 2. Строка уведомления

Иконка 32×32 слева (не сжимается), текст в две строки с обрезкой по второй, крестик справа. Ширина блока 360px, длинный текст не должен ломать раскладку.

Задание 3. Карточка с прижатой кнопкой

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

Подсказка: flex flex-col у карточки и mt-auto у кнопки.

Вопрос 1

Какой класс распределяет элементы вдоль главной оси?

Вопрос 2

Зачем иконке в flex-строке класс shrink-0?

Вопрос 3

Почему truncate не работает внутри flex-контейнера?

Вопрос 4

Чем flex-1 отличается от w-full во flex-строке?