Menu Samaritan's Purse

FLEX-FLOW

The flex-flow property is shorthand for flex-direction and flex-wrap.

SYNTAX

CSS

flex-flow: value;

JS

object.style.flexFlow = "value";

VALUES

<'flex-flow'> = <'flex-direction'> || <'flex-wrap'>
<'flex-direction'> = column | column-reverse | row | row-reverse

Specifies how flex items are placed in the flex container by setting the direction of the flex container's main axis.

column

The flex container's main axis has the same orientation as the block axis of the current writing mode.

column-reverse

The same as column except the main-start and main-end directions are swapped.

row

The flex container's main axis has the same orientation as the inline axis of the current writing mode.

row-reverse

The same as row except the main-start and main-end directions are swapped.

<'flex-wrap'> = nowrap | wrap | wrap-reverse

Controls whether the flex container is single-line or multi-line and the direction of the cross-axis which determines the direction new lines are stacked in.

nowrap

The flex container is single-line.

wrap

The flex container is multi-line.

wrap-reverse

The same as wrap except the cross-start and cross-end directions are swapped.

EXAMPLES

FLEX-DIRECTION | COLUMN

FLEX-DIRECTION | COLUMN-REVERSE

FLEX-DIRECTION | ROW

FLEX-DIRECTION | ROW-REVERSE

FLEX-WRAP | NOWRAP

FLEX-WRAP | WRAP

FLEX-WRAP | WRAP-REVERSE

JS

INTERNAL

flex-direction

flex-wrap

EXTERNAL

World Wide Web Consortium (W3C)