Storleken på flex-element längs huvudaxeln

Egenskaperna width och height sätter bredden och höjden på flex-elementet oberoende av axlarnas riktning. Det vill säga, om axeln är horisontell, kommer width att sätta bredden, men om axeln är vertikal, kommer width fortfarande att sätta bredden. Ibland är detta beteende inte bekvämt.

I flex-modellen finns en speciell egenskap flex-basis, som sätter storleken på elementet längs huvudaxeln. Det betyder att om huvudaxeln är horisontell - kommer denna egenskap att sätta elementens bredd, och om den är vertikal - så höjden. Denna egenskap måste sättas på flex-elementen själva, inte på deras förälder. Låt oss titta på exempel.

Låt oss anta att huvudaxeln är horisontell, och flex-basis har värdet 50px. I detta fall kommer elementens bredd att vara 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; /* axeln är horisontell */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elementets storlek */
	border: 1px solid green;
}

Låt oss nu vända på axeln, utan att ändra värdet på egenskapen flex-basis. I detta fall kommer elementens höjd att vara 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; /* axeln är vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Skapa 5 flex-block. Sätt deras bredd längs huvudaxeln till 100px. Observera blockens beteende längs olika axlar.

Om axeln är horisontell och ett block har egenskapen flex-basis samtidigt som egenskapen width är satt, kommer flex-basis att ha prioritet. Testa detta.

Om axeln är vertikal och ett block har egenskapen flex-basis samtidigt som egenskapen height är satt, kommer flex-basis att ha prioritet. Testa detta.