CSS Wrap: как правильно переносить текст в стилях CSS

CSS wrap - это техника оформления, которая относится к размещению содержимого внутри контейнера. Когда содержимое превышает размер контейнера, оно может либо вылезти за границы, либо получить прокрутку, чтобы сохранить форматирование страницы. Однако с помощью CSS wrap можно принудительно расположить элементы в строку, что позволяет избежать этих проблем.

Примеры кода:

HTML:

html

  
  
  
  

CSS:

css
.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper img {
  flex: 1 0 20%;
  margin: 10px;
}

В этом примере мы используем технику flexbox для создания обертки. Свойство `display: flex` устанавливает элемент-контейнер на использование гибкой модели layout. Свойство `flex-wrap: wrap` разрешает элементам переноситься на другую строку при необходимости.

Кроме того, мы используем свойство `flex: 1 0 20%` для установки правил для каждого изображения внутри контейнера. Свойство `flex-grow: 1` означает, что каждому элементу разрешено расти на свободное пространство внутри контейнера, `flex-shrink: 0` запрещает сжимать элемент, если контейнер не имеет достаточного места, а `flex-basis:20%` устанавливает начальную ширину элемента на 20%.

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