Proprietatea flex-flow

Proprietatea flex-flow este o prescurtare pentru flex-direction și flex-wrap. Valoarea implicită: row nowrap. Aplicată elementului părinte pentru containerele flex.

Sintaxă

selector {
	flex-flow: directia_axei_principale wrap;
}

Ordinea valorilor nu contează.

Exemplu

În acest exemplu, blocurile nu încap în containerul lor și se vor aranja pe mai multe rânduri:

<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;
}

Exemplu

Să schimbăm direcția axei principale (column în loc de 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;
}

Vedeți și

proprietatea flex-direction,
care definește direcția axelor containerelor flex
proprietatea justify-content,
care definește alinierea de-a lungul axei principale
proprietatea align-items,
care definește alinierea de-a lungul axei transversale
proprietatea flex-wrap,
care definește afișarea pe mai multe rânduri a containerelor flex
proprietatea order,
care definește ordinea elementelor flex
proprietatea align-self,
care definește alinierea unui singur element
proprietatea flex-basis,
care definește dimensiunea inițială a unui element flex
proprietatea flex-grow,
care definește factorul de creștere al elementelor flex
proprietatea flex-shrink,
care definește factorul de contracție al elementelor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis