Flex-ominaisuus

Ominaisuus flex on lyhenne ominaisuuksille flex-basis, flex-shrink ja flex-grow.

Sovelletaan: yksittäiseen flex-elementtiin.

Arvojen järjestyksellä ei ole väliä. Toinen ja kolmas parametri (flex-shrink, flex-basis) eivät ole pakollisia.

Arvot

Katso vastaavat ominaisuudet.

Oletusarvo: 0 1 auto.

Esimerkki

Oletetaan, että meillä on 3 elementtiä. Kunkin leveys on 200px ja yhteensä ne ovat 600px leveitä, mikä on enemmän kuin vanhempakontainerin leveys, joka on 300px. Asetetaan ensimmäisen elementin leveys 200px, toisen elementin - 300px, kolmannen elementin - 100px. Kaikille elementeille olkoon flex-basis-arvona 1, ja flex-shrink - 1, 2, 3 vastaavasti elementin järjestysnumeron mukaan:

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

Katso myös

ominaisuus flex-direction,
joka asettaa flex-elementtien akselien suunnan
ominaisuus justify-content,
joka asettaa tasauksen pääakselilla
ominaisuus align-items,
joka asettaa tasauksen poikkidakselilla
ominaisuus flex-wrap,
joka asettaa flex-elementtien monirivisyyden
ominaisuus flex-flow,
lyhenne flex-direction ja flex-wrap -ominaisuuksille
ominaisuus order,
joka asettaa flex-elementtien järjestyksen
ominaisuus align-self,
joka asettaa yhden elementin tasauksen
ominaisuus flex-basis,
joka asettaa tietyn flex-elementin koon
ominaisuus flex-grow,
joka asettaa flex-elementtien "ahneuden"
ominaisuus flex-shrink,
joka asettaa flex-elementtien kutistuvuuden