Атрибут CSS flex-flow

курсы рекомендованы:

определение и использование

атрибут flexFlow является сокращением для следующих атрибутов:备注:

если элемент не является эластичным элементом, то атрибут flex не действует.

еще см. также:CSS учебник:

атрибут flex-shrinkCSS эластичные контейнеры

атрибут flex-shrinkатрибут flex

атрибут flex-shrinkатрибут flex-direction

атрибут flex-shrinkатрибут flex-basis

атрибут flex-shrinkатрибут flex-grow

атрибут flex-shrinkCSS справочник:

атрибут flex-wrapHTML DOM справочник:

атрибут flexFlow

пример

показывать эластичные элементы в обратном направлении и переливаться на новую строку при необходимости:
  div {
  display: flex;
flex-flow: row-reverse wrap;

}

попробуйте сами

CSS синтаксис

flex-flow: flex-direction flex-wrap|initial|inherit;

значение атрибута значение
flex-direction

flex-wrap

  • описание
  • row
  • row-reverse
  • column
  • установить этот атрибут в его значение по умолчанию. См. также
  • от его родительского элемента. См. также

column-reverse

по умолчанию "row".

определяет направление эластичных элементов.

flex-wrap

  • возможные значения:
  • nowrap
  • wrap
  • установить этот атрибут в его значение по умолчанию. См. также
  • от его родительского элемента. См. также

wrap-reverse

по умолчанию "nowrap".

установить этот атрибут в его значение по умолчанию. См. также определяет, должны ли弹性 элементы переливаться на новую строку. установить этот атрибут в его значение по умолчанию. См. такжеатрибуты анимации
от его родительского элемента. См. также initial от его родительского элемента. См. такжеатрибуты анимации

inherit

технические детали по умолчанию:
row nowrap наследование:
нет создание анимации:не поддерживается. См. также:атрибуты анимации
. версия:
CSS3 JavaScript синтаксис:

object.style.flexFlow="column nowrap"

поддержка браузеров

числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0