Egenskapen flex-flow

Egenskapen flex-flow er en forkortelse for flex-direction og flex-wrap. Standardverdi: row nowrap. Brukes på foreldreelementet for flex-bokser.

Syntaks

velger {
	flex-flow: hovedakseretning flerlinjet;
}

Rekkefølgen på verdiene spiller ingen rolle.

Eksempel

I dette eksemplet passer ikke boksene inn i sin container og vil ordne seg 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

La oss endre 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å

egenskapen flex-direction,
som angir retningen på aksene for flex-bokser
egenskapen justify-content,
som angir justering langs hovedaksen
egenskapen align-items,
som angir justering langs kryssaksen
egenskapen flex-wrap,
som angir flerlinjet for flex-bokser
egenskapen order,
som angir rekkefølgen til flex-bokser
egenskapen align-self,
som angir justering av en enkelt boks
egenskapen flex-basis,
som angir størrelsen på en spesifikk flex-boks
egenskapen flex-grow,
som angir "grådigheten" til flex-bokser
egenskapen flex-shrink,
som angir krympbarheten til flex-bokser
egenskapen flex,
forkortelse for flex-grow, flex-shrink og flex-basis