The flex-flow property is a sub-property of the Flexible Box Layout module. It is a shorthand for flex-direction and flex-wrap. Syntax flex-flow: <%u2018flex-direction%u2019> || <%u2018flex-wrap%u2019> .flex-container { flex-flow: row wrap; } You can specify one or two values, no matter the order. Demo Both lists behave in the exact same way: The blue one has
CSS
The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main-axis, thus defining the direction flex items are placed in the flex container. Reminder: the main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends
The flex-basis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero. A flex-basis value set to auto sizes the element according
The flex property is a sub-property of the Flexible Box Layout module. This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional. Syntax flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] .flex-item { flex: 1 100px; } Here are a couple of common values for