Propiedad flex-basis

La propiedad flex-basis establece el tamaño de un bloque flex específico antes de aplicar el resto de propiedades flex. En general, la propiedad establece el tamaño del elemento a lo largo del eje principal. Esto significa que si el eje principal es horizontal - esta propiedad establecerá el ancho de los elementos, y si es vertical - la altura.

Se aplica a un bloque flex específico.

Esta propiedad es parte constituyente de la propiedad abreviada flex.

Sintaxis

selector {
	flex-basis: cualquier unidad CSS (y porcentajes) | auto;
}

Valor por defecto: auto.

Ejemplo

Supongamos que el eje principal está dispuesto horizontalmente, 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;
}

Ejemplo

Ahora volteemos el eje, sin cambiar 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;
}

Véase también

propiedad flex-direction,
que establece la dirección de los ejes de los bloques flex
propiedad justify-content,
que establece la alineación a lo largo del eje principal
propiedad align-items,
que establece la alineación a lo largo del eje transversal
propiedad flex-wrap,
que establece la multilínea de los bloques flex
propiedad flex-flow,
abreviatura para flex-direction y flex-wrap
propiedad order,
que establece el orden de los bloques flex
propiedad align-self,
que establece la alineación de un solo bloque
propiedad flex-grow,
que establece la avaricia de los bloques flex
propiedad flex-shrink,
que establece la compresibilidad de los bloques flex
propiedad flex,
abreviatura para flex-grow, flex-shrink y flex-basis