Egenskaben flex-flow

Egenskaben flex-flow er en forkortelse for flex-direction og flex-wrap. Standardværdi: row nowrap. Anvendes på forælderelementet for flex-containere.

Syntaks

selektor {
	flex-flow: hovedakse_retning wrap;
}

Rækkefølgen af værdierne er ligegyldig.

Eksempel

I dette eksempel passer containerne ikke i deres forælder og vil blive arrangeret på flere linjer:

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

Eksempel

Lad os ændre retningen på hovedaksen (column i stedet for 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;
}

Se også

egenskaben flex-direction,
som angiver retningen på akserne i flex-containere
egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs crossaksen
egenskaben flex-wrap,
som angiver wrap for flex-containere
egenskaben order,
som angiver rækkefølgen af flex-containere
egenskaben align-self,
som angiver justering af en enkelt container
egenskaben flex-basis,
som angiver størrelsen på en specifik flex-container
egenskaben flex-grow,
som angiver "grådigheden" af flex-containere
egenskaben flex-shrink,
som angiver sammenpressing af flex-containere
egenskaben flex,
forkortelse for flex-grow, flex-shrink og flex-basis