Svojstvo flex-flow

Svojstvo flex-flow je skraćenica za flex-direction i flex-wrap. Podrazumevana vrednost: row nowrap. Primenjuje se na roditeljski element za flex blokove.

Sintaksa

selektor {
	flex-flow: pravac_glavne_ose višelinijskost;
}

Redosled vrednosti nije bitan.

Primer

U ovom primeru blokovi se ne uklapaju u svoj kontejner i poredaće se u nekoliko linija:

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

Primer

Promenimo pravac glavne ose (column umesto 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;
}

Pogledajte takođe

svojstvo flex-direction,
koje zadaje pravac osa flex blokova
svojstvo justify-content,
koje zadaje poravnanje duž glavne ose
svojstvo align-items,
koje zadaje poravnanje duž poprečne ose
svojstvo flex-wrap,
koje zadaje višelinijskost flex blokova
svojstvo order,
koje zadaje redosled flex blokova
svojstvo align-self,
koje zadaje poravnanje jednog bloka
svojstvo flex-basis,
koje zadaje veličinu određenog flex bloka
svojstvo flex-grow,
koje zadaje "proždrljivost" flex blokova
svojstvo flex-shrink,
koje zadaje skupljivost flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis