Ominaisuus flex-basis

Ominaisuus flex-basis asettaa tietyn flex-elementin koon ennen kuin muut flex-ominaisuudet sovelletaan siihen. Yleisesti ottaen ominaisuus asettaa elementin koon pääakselin suunnassa. Tämä tarkoittaa, että jos pääakseli on vaakasuora - tämä ominaisuus asettaa elementtien leveyden, ja jos pystysuora - niin korkeuden.

Sovelletaan tiettyyn flex-elementtiin.

Tämä ominaisuus on osa lyhennysominaisuutta flex.

Syntaksi

valitsija {
	flex-basis: mitkä tahansa CSS-yksiköt (ja prosentit) | auto;
}

Oletusarvo: auto.

Esimerkki

Oletetaan, että pääakselimme on vaakasuora, ja flex-basis-ominaisuuden arvo on 50px. Tässä tapauksessa elementtien leveys on 50px:

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

.parent	{
	display: flex;
	flex-direction: row; /* akseli vaakasuora */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elementin koko */
	border: 1px solid green;
}

Esimerkki

Käännämme nyt akselin, muuttamatta ominaisuuden flex-basis arvoa. Tässä tapauksessa elementtien korkeus on 50px:

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

.parent {
	display: flex;
	flex-direction: column; /* akseli pystysuora */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

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 poikittaistakselilla
ominaisuus flex-wrap,
joka asettaa flex-elementtien monirivisyyden
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka asettaa flex-elementtien järjestyksen
ominaisuus align-self,
joka asettaa yhden elementin tasauksen
ominaisuus flex-grow,
joka asettaa flex-elementtien "ahneuden"
ominaisuus flex-shrink,
joka asettaa flex-elementtien kutistuvuuden
ominaisuus flex,
lyhenne flex-growille, flex-shrinkille ja flex-basikselle