flex-flow property
The flex-flow property is a shorthand for
flex-direction
and
flex-wrap.
Default value: row nowrap. It applies to
the parent element for flex blocks.
Syntax
selector {
flex-flow: main_axe_direction multi-line;
}
The order doesn't matter.
Example
In this example, the blocks do not fit into their container and will be lined up in several lines:
<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;
}
:
Example
Let's change a direction of the main axis (column instead of 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;
}
:
See also
-
the
flex-directionproperty
that specifies a direction of the flex block axes -
the
justify-contentproperty
that sets an alignment along the cross axis -
the
align-itemsproperty
that sets an alignment along the cross axis -
the
flex-wrapproperty
that sets the multi-line nature of flex blocks -
the
orderproperty
that specifies an order of flex blocks -
the
align-selfproperty
that specifies an alignment of a single block -
the
flex-basisproperty
that sets a size of a certain flex block -
the
flex-growproperty
that sets a greediness of flex blocks -
the
flex-shrinkproperty
that sets a shrink of flex blocks -
the
flexproperty
a shorthand for flex-grow, flex-shrink and flex-basis