# Свойство flex-wrap

Свойство `flex-wrap` задает многострочную расстановку блоков по главной оси. Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение `flex-flow`.

## Синтаксис

`селектор { flex-wrap: nowrap | wrap | wrap-reverse; }`

## Значения

Значение | Описание
--- | ---
`nowrap` | Однострочный режим - блоки выстраиваются в одну строку.
`wrap` | Блоки выстраиваются в несколько строк, если не помещаются в одну.
`wrap-reverse` | То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый).

Значение по умолчанию: `nowrap`.

## Пример . Значение wrap

Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Пример . Значение wrap-reverse

А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: flex; flex-wrap: wrap-reverse; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Пример . Значение nowrap

Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не `100px`, как им задано, а меньше:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Пример . Значение nowrap

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }`

:

## Смотрите также

- свойство `flex-direction`,
  которое задает направление осей flex блоков
- свойство `justify-content`,
  которое задает выравнивание по главной оси
- свойство `align-items`,
  которое задает выравнивание по поперечной оси
- свойство `flex-wrap`,
  которое многострочность flex блоков
- свойство `flex-flow`,
  сокращение для flex-direction и flex-wrap
- свойство `order`,
  которое задает порядок flex блоков
- свойство `align-self`,
  которое задает выравнивание одного блока
- свойство `flex-basis`,
  которое задает размер конкретного flex блока
- свойство `flex-grow`,
  которое задает жадность flex блоков
- свойство `flex-shrink`,
  которое задает сжимаемость flex блоков
- свойство `flex`,
  сокращение для flex-grow, flex-shrink и flex-basis

←→
↑