Flexbox

Contactar con el profesor

Usando display:flex o display:inline-flex en una capa, la convertimos en un contenedor flexible. En el primer caso, la capa se comporta con respecto a otros elementos de la página como si tuviese display:block, en el segundo, como si tuviese display:inline-block

Estilos fundamentales de display flex

flex-direction

Especifica cómo se sitúan los elementos flexibles dentro del contenedor.

flex-wrap

  • wrap: Los elementos de la capa se distribuirán en una o varias filas en función de su tamaño.
  • nowrap: Los elementos de la capa estarán sí o sí en una sola fila.

flex-flow

flex-flow:row wrap;

O lo que es lo mismo:

flex-direction: row;
flex-wrap: wrap

Ejercicio 3 columnas con flex

Flexbox 1

Ejercicio anuncios en columnas con flex

Alineación horizontal y vertical con display:flex

justify-content

#wrapper{
	display: flex;
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Flexbox 2

align-items

#wrapper{
	display: flex;
	align-items: flex-start | flex-end | center | baseline | stretch;
}
Flexbox 3

align self

#wrapper{
	display: flex;
	align-self: flex-start | flex-end | center | baseline | stretch;
}
Flexbox 4

order

Podemos establecer el orden en el que aparecen los componentes de una caja flexible. Por defecto aparecerán tal y como aparecen en el código HTML (equivale a order: 0)

flex:resumen

Cambiar el tamaño de las columnas con flex

<style>
	.container{
		display: flex;
	}

	.rosa{
		background: pink;
		flex-basis: 100px
	}

	.naranja{
		background: orange;
	}
</style>

<div class="container">
	<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
	<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>

flex: abreviatura de flex-grow, flex-shrink, flex-basis

Nos permite establecer cómo crece o decrece un elemento flexible dentro del contenedor en relación a los demás.

<style>
	.container{
		display: flex; 	 
	}

	.rosa{
		background: pink;
		flex: 1
	}
	.naranja{
		background: orange;
		flex: 3
	}
</style>

<div class="container">
	<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
	<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>

Esta propiedad se puede volver más compleja, porque puede tener tres parámetros: flex-grow, flex-shrink y flex-basis.

Ejemplo

Supongamos que tenemos un contenedor al que llamaremos “wrapper” que tiene 300px de ancho.

#wrapper { display: flex;}

este contenedor tiene en su interior dos elementos, col1 y col2, que no tienen un ancho especificado. Vamos a establecer los siguientes valores para ambos de la propiedad flex: flex-grow, flex-shrink, flex-basis:

.col1 { flex: 3 1 100px;}
.col2 { flex: 1 2 100px;}

Como hemos establecido un flex-basis para cada elemento de 100px, nos quedarán aún 100px libres sin ocupar (300px del contenedor menos 100px del elemento col y menos 100px del elemento col2). ¿Como se reparte ese espacio disponible entre los elementos col1 y col2? En función del flex-grow: 3 partes para el elemento B (75px) y una parte para el elemento C (25px). Es decir, de inicio el elemento B ocupará 100px+75px = 175px de los 300px disponibles que mide el elemento A, y el elemento C ocupará 100px+25px=125px de los 300px disponibles del elemento A.

Ahora bien, supongamos que el elemento contenedor A mide 170px y no 300px. Eso quiere decir que habrá espacio negativo, porque los elementos B y C tienen un flex-basis de 100px cada uno, es decir, 200px, que es 30px mayor que los 170px del contenedor. En este caso el ratio que se usa es el flex-shrink, que recordemos que era 1 para el elemento B y 2 para el elemento C. Esos 30px se restarán del ancho de los elementos B y C en función de dicho ratio: al elemento B se le quitarán 10px y al elemento C se le quitarán 20px.

  • flex-grow: Especifica el factor de crecimiento, es decir, cuanto crecerá el elemento en relación a los demás cuando hay espacio disponible del contenedor a ocupar. Por defecto es ‘0’, que es el valor que dimos en el ejemplo anterior a los tres elementos.
  • flex-shrink: Determina el factor de reducción, es decir, cuanto decrecerá el elemento en relación a los demás cuando hay espacio negativo en el contenedor (el contenedor es más pequeño de los anchos combinados de los elementos que hay en su interior). Por defecto es ‘1’.
  • flex-basis: Toma el mismo valor que la propiedad ‘width’ y establece el tamaño inicial del elemento antes de distribuir el espacio libre de acuerdo con los ratios de flex-grow o flex-shrink. Cuando se omite, su valor es ‘main-size’ (anteriormente, ‘auto’).
← img vs background
Reseteadores de estilos →

Aviso Legal | Política de privacidad