Перенос и растяжение

Мы добавили в раздел «Наши кошки» две вещи. Под заголовком теперь ряд меток, которые говорят, что есть у всех наших кошек. Под карточками — оранжевый блок, где посетители могут подписаться на новости по электронной почте. Оба ряда уже являются flex-контейнерами с классами flex gap-2. Прокрутите предпросмотр вниз, чтобы увидеть их.

Посмотрите на метки: в узком предпросмотре они не помещаются в один ряд, поэтому сжимаются, и их текст разбивается на две строки. Как вы знаете из курса CSS, flex-контейнер держит все свои элементы на одной линии. Эти классы определяют, что произойдёт, если элементы не помещаются или если остаётся свободное место:

Класс	CSS	Что делает
`flex-wrap`	`flex-wrap: wrap;`	Элементы, которые не помещаются, переносятся на следующую строку.
`flex-nowrap`	`flex-wrap: nowrap;`	Все элементы остаются на одной строке (по умолчанию).
`grow`	`flex-grow: 1;`	Элемент растёт, занимая свободное место.
`flex-1`	`flex: 1;`	Элемент растёт от начального размера, равного нулю, поэтому занимает всё место, которое оставили другие.
`shrink-0`	`flex-shrink: 0;`	Элемент не сжимается: он сохраняет свой размер.

По умолчанию flex-элементы сжимаются (flex-shrink: 1), но не уже, чем их самое длинное слово. Именно это и происходит с нашими метками. Класс shrink-0 вообще запрещает элементу сжиматься. Он полезен для всего, что должно сохранять свой размер, например для маленькой круглой картинки рядом с длинным текстом: без shrink-0 её сплющило бы в овал.

Задание

Добавьте списку меток (элементу ul под заголовком «Наши кошки») класс flex-wrap. Метки, которым не хватает места, перейдут на следующую строку, а текст каждой метки останется в одну строку. (Если в вашем предпросмотре помещаются все пять, они останутся в одном ряду.)
В оранжевом блоке поле для электронной почты имеет ту ширину, какую браузеры дают полям по умолчанию. Добавьте полю (input) класс flex-1: оно вырастет и заполнит ряд до кнопки «Подписаться».
На панели Ширина просмотра над предпросмотром нажмите 375 px — это ширина телефона. Поле формы не может стать уже своей ширины по умолчанию, поэтому кнопка не помещается рядом с ним и вылезает за пределы блока. Добавьте класс flex-wrap и форме (form): когда места нет, кнопка переходит под поле. Потом верните предпросмотр кнопкой По размеру.

НазадДалее

Перенос и растяжение

Класс	CSS	Что делает
`flex-wrap`	`flex-wrap: wrap;`	Элементы, которые не помещаются, переносятся на следующую строку.
`flex-nowrap`	`flex-wrap: nowrap;`	Все элементы остаются на одной строке (по умолчанию).
`grow`	`flex-grow: 1;`	Элемент растёт, занимая свободное место.
`flex-1`	`flex: 1;`	Элемент растёт от начального размера, равного нулю, поэтому занимает всё место, которое оставили другие.
`shrink-0`	`flex-shrink: 0;`	Элемент не сжимается: он сохраняет свой размер.

Задание

Добавьте списку меток (элементу ul под заголовком «Наши кошки») класс flex-wrap. Метки, которым не хватает места, перейдут на следующую строку, а текст каждой метки останется в одну строку. (Если в вашем предпросмотре помещаются все пять, они останутся в одном ряду.)

В оранжевом блоке поле для электронной почты имеет ту ширину, какую браузеры дают полям по умолчанию. Добавьте полю (input) класс flex-1: оно вырастет и заполнит ряд до кнопки «Подписаться».

На панели Ширина просмотра над предпросмотром нажмите 375 px — это ширина телефона. Поле формы не может стать уже своей ширины по умолчанию, поэтому кнопка не помещается рядом с ним и вылезает за пределы блока. Добавьте класс flex-wrap и форме (form): когда места нет, кнопка переходит под поле. Потом верните предпросмотр кнопкой По размеру.