flex-flow

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Демо

Flexbox и выравнивание

• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• order

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Синтаксис

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

Значения

Значение по-умолчанию:

• flex-direction: row
• flex-wrap: nowrap

Наследуется: нет

Применяется к флекс-элементам

Анимируется: нет

Смотрите отдельные свойства для их значений.

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-flow.

Спецификации

• CSS Flexible Box Layout Module

Поддержка браузерами

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

См. также

• Руководство по Flexbox

Комментарии