Что такое flex-wrap в HTML $ CSS

`flex-wrap` — это CSS-свойство, которое используется в контейнерах Flexbox для управления тем, как элементы внутри контейнера переносятся на новую строку или столбец, если они не помещаются в одну строку/столбец.

### Возможные значения свойства `flex-wrap`:
1. **`nowrap` (значение по умолчанию)**
Элементы остаются в одной строке/столбце, даже если это приводит к их сжатию.
```css
display: flex;
flex-wrap: nowrap;
```

2. **`wrap`**
Элементы переносятся на новую строку/столбец, если они не помещаются в одну строку.
```css
display: flex;
flex-wrap: wrap;
```

3. **`wrap-reverse`**
Элементы переносятся на новую строку/столбец, но в обратном порядке (то есть строки идут сверху вниз, а не снизу вверх, как обычно).
```css
display: flex;
flex-wrap: wrap-reverse;
```

### Пример использования
```html
<div class="container">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
<div>Элемент 4</div>
</div>

<style>
.container {
display: flex;
flex-wrap: wrap;
width: 200px; /* Ограничиваем ширину контейнера */
border: 1px solid #000;
}

.container div {
flex: 1 1 100px; /* Задаем минимальную ширину для элементов */
border: 1px solid #f00;
text-align: center;
}
</style>
```

### Как работает
1. **Без переноса (nowrap):**
Все элементы останутся в одной строке и будут ужиматься, если их ширина превышает ширину контейнера.

2. **С переносом (wrap):**
Элементы перенесутся на следующую строку, если не помещаются в контейнер.

3. **С обратным переносом (wrap-reverse):**
Элементы также будут переноситься, но строки будут строиться сверху вниз.

### Как комбинировать с другими свойствами Flexbox
`flex-wrap` часто используется вместе со свойством `flex-direction` для создания разных направлений размещения элементов:
- `row` (по строкам слева направо),
- `row-reverse` (по строкам справа налево),
- `column` (по столбцам сверху вниз),
- `column-reverse` (по столбцам снизу вверх).

Например:
```css
.container {
display: flex;
flex-direction: row; /* Направление по строкам */
flex-wrap: wrap; /* Переносить на новую строку при необходимости */
}
```

Свойство `flex-wrap` позволяет создавать более гибкие и адаптивные интерфейсы.