Flex īpašība

Īpašība flex ir saīsinājums priekš flex-basis, flex-shrink un flex-grow.

Attiecas uz: konkrētu flex bloku.

Vērtību secībai nav nozīmes. Otrais un trešais parametrs (flex-shrink, flex-basis) nav obligāts.

Vērtības

Skatīties atbilstošās īpašības.

Noklusējuma vērtība: 0 1 auto.

Piemērs

Pieņemsim, ka mums ir 3 elementi. Katra no tiem platums ir 200px un kopā tie ir 600px, kas ir vairāk nekā vecāka konteinera platums, kurš ir 300px. Piešķirsim pirmajam elementam platumu 200px, otrajam elementam - 300px, trešajam elementam - 100px. Visiem elementiem lai vērtība flex-basis ir 1, un flex-shrink - 1, 2, 3 atbilstoši elementa kārtas numuram:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Skatīt arī

īpašība flex-direction,
kura nosaka flex bloku asu virzienu
īpašība justify-content,
kura nosaka izlīdzināšanu pa galveno asi
īpašība align-items,
kura nosaka izlīdzināšanu pa šķērsasi
īpašība flex-wrap,
kura nosaka flex bloku daudzrinduīpašību
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kura nosaka flex bloku secību
īpašība align-self,
kura nosaka viena bloka izlīdzināšanu
īpašība flex-basis,
kura nosaka konkrēta flex bloka izmēru
īpašība flex-grow,
kura nosaka flex bloku "alkatību"
īpašība flex-shrink,
kura nosaka flex bloku saspiežamību