Vetia flex-flow

Vetia flex-flow është një shkurtim për flex-direction dhe flex-wrap. Vlera e paracaktuar: row nowrap. Aplikohet në elementin prind për blloqet flex.

Sintaksa

përzgjedhësi {
	flex-flow: drejtim_aksi_kryesor shumërreshtëzim;
}

Rendi i vlerave nuk ka rëndësi.

Shembull

Në këtë shembull blloqet nuk futen në kontejnerin e tyre dhe do të rreshtohen në disa rreshta:

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

Shembull

Të ndryshojmë drejtimin e aksit kryesor (column në vend të 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;
}

Shihni gjithashtu

vetia flex-direction,
e cila përcakton drejtimin e akseve të blloqeve flex
vetia justify-content,
e cila përcakton rreshtimin përgjatë aksit kryesor
vetia align-items,
e cila përcakton rreshtimin përgjatë aksit tërthor
vetia flex-wrap,
e cila përcakton shumërreshtëzimin e blloqeve flex
vetia order,
e cila përcakton rendin e blloqeve flex
vetia align-self,
e cila përcakton rreshtimin e një blloku të vetëm
vetia flex-basis,
e cila përcakton madhësinë e një blloku specifik flex
vetia flex-grow,
e cila përcakton lakminë e blloqeve flex
vetia flex-shrink,
e cila përcakton ngjeshshmërinë e blloqeve flex
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis