мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство 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