5 августа буду в отъезде. отвечаю по возможности

Свойство flex-flow

Свойство flex-flow - это сокращение для flex-direction и flex-wrap. Значение по умолчанию: row nowrap.

Применяется к родительскому элементу для flex блоков.

Синтаксис

селектор { flex-flow: направление_главной_оси многострочность; }

Порядок значения не имеет.

Пример

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

<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-flow: row wrap; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример

Поменяем направление главной оси (column вместо row):

<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 { flex-flow: column wrap; justify-content: space-between; display: flex; height: 200px; width: 330px; margin: auto; border: 1px solid #696989; } #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