Tamaño del elemento flex a lo largo del eje principal

Las propiedades width y height definen el ancho y la altura del elemento flex independientemente de la dirección de los ejes. Es decir, si el eje es horizontal, width definirá el ancho, pero si el eje es vertical, width seguirá definiendo el ancho. A veces este comportamiento no es conveniente.

En el modelo flex existe una propiedad especial flex-basis, que define el tamaño del elemento a lo largo del eje principal. Esto significa que si el eje principal es horizontal, esta propiedad definirá el ancho de los elementos, y si es vertical, definirá la altura. Esta propiedad debe aplicarse a los propios elementos flex, no a su contenedor. Veamos algunos ejemplos.

Supongamos que el eje principal es horizontal, y flex-basis tiene el valor 50px. En este caso, el ancho de los elementos será 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; /* eje horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* tamaño del elemento */
	border: 1px solid green;
}

Ahora cambiemos la dirección del eje, sin modificar el valor de la propiedad flex-basis. En este caso, la altura de los elementos será 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; /* eje vertical */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Crea 5 bloques flex. Asígneles un ancho a lo largo del eje principal de 100px. Observa el comportamiento de los bloques a lo largo de diferentes ejes.

Si el eje es horizontal y al bloque se le asigna la propiedad flex-basis y simultáneamente la propiedad width, entonces flex-basis tendrá prioridad. Compruébalo.

Si el eje es vertical y al bloque se le asigna la propiedad flex-basis y simultáneamente la propiedad height, entonces flex-basis tendrá prioridad. Compruébalo.