Обертывание

Рэп-баттл (или баттл-рэп ) — вид рэп-исполнения, в котором два или более рэпера поют друг против друга (как правило, включая некоторые оскорбления/нападки). Сегодняшний комикс играет с омофонами Rap и Wrap, чтобы пошутить над Flexbox и flex-wrapсобственностью .

Flex-контейнер по умолчанию размещает содержимое в одну строку. Это может быть нормально, но если размер элементов превышает размер контейнера, они будут сжаты или переполнены. Поэтому вместо этого мы можем захотеть получить содержимое в несколько строк. Вот где flex-wrapвступает в действие.

Это свойство определяет, будет ли flex-контейнер однострочным или многострочным (в зависимости от количества и размера flex-элементов), а в случае многострочного — определяет, как элементы будут складываться после переноса.

flex-wrapимеет три основных значения:

• nowrap: предметы не будут сворачиваться; вместо этого они изменят свой размер или переполнят родительский элемент. (Это значение по умолчанию.)
• wrap: элементы будут переноситься вместо переполнения гибкого контейнера. Они будут складываться от кросс-старта до кросс-энда.
• wrap-reverse: элементы будут переноситься вместо переполнения гибкого контейнера. Они будут складываться от кросс-энда до кросс-старта.

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

Теперь, если мы изменим код, чтобы установить значение «wrap» для flex-wrap, когда flex-элементы будут переполнять контейнер, вместо этого они переносятся в новую строку (живая демонстрация):

Но если поставить flex-wrap"wrap-reverse", то направление обтекания будет противоположным: вместо того, чтобы попасть в новую строку, завернутые элементы выталкивают остальные в новую строку.

Последний пример с flex-directionнабором «column». В этом случае элементы организованы вертикально в столбцы, поэтому при переносе они делают это в столбцах, а не в строках:

Я надеюсь, что эти примеры были полезны и вам понравился сегодняшний комикс . Узнайте больше о flex-wrapследующих источниках:

• Статья MDN о flex-wrap
• CSS-трюки: полное руководство по Flexbox
• Джош В. Комо: интерактивное руководство по Flexbox