display flex

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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.

<style>
	.containerFlex c{
		display: flex;
		flex-direction: rowrow-reversecolumncolumn-reverse
	}
	.colKhaki{
		background: Khaki; 
	}
	.colSalmon{
		background: salmon;
	}

</style>

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.

<style>
	.containerFlex{
		display: flex;
		flex-wrap: nowrapwrapwrap-reverse;
	}
	.column{
        	border:1px solid black;
		width: auto300px
	}
</style>

flex-flow

flex-flow:row wrap;

flex-direction: row;
flex-wrap: wrap

<style>
	.containerFlex{
		display: flex;
		flex-flow: rowrow-reversecolumncolumn-reverse nowrapwrapwrap-reverse;
	}
	.colKhaki{
		background: Khaki; 
	}
	.colSalmon{
		background: salmon;
	}
	.column{
		width: auto300px
	}
</style>

Ejercicios con display:flex

Ejercicio 3 columnas con display flex

Ejercicio página sencilla con display flex

Ver ejercicio resuelto

Sobre el ejercicio sencillo de HTML

Debemos poder mirar al ejercicio propuesto y dividirlo en capas o rectángulos. Las páginas web se estructuran en capas. ¿Cuántas capas tiene este ejercicio?.

Empezaremos a contar de fuera a dentro y de arriba a abajo y de izquierda a derecha.

Primero tenemos una capa contenedora. Dentro tiene dos columnas apiladas horizontalmente (para ello podemos usar float:left o display:inline-block).

Dentro de la primera columna, tenemos una foto y una lista de enlaces.

Dentro de la segunda columna, está el contenido de la web.

Tener la habilidad para ver la fotografía de una web y poder descomponerla en rectángulos de información es algo fundamental para poder hacer páginas web. Es el paso uno. A partir de ahí podemos empezar a maquetar. Un maquetador no empieza a maquetar por dónde sabe. Empieza a maquetar por el principio. Y el primer paso es saber hacer esta descomposición del diseño que nos han pasado.

Ejercicio anuncios en columnas con display flex

Alineación horizontal y vertical con display:flex

Conceptos

• Contenedor. En este elemento es en el que aplicamos el estilo display:flex.
• Item: Cada uno de los hijos flexibles que tendrá el contenedor en su interior.
• Eje principal. Los contenedores flexibles tendrán una orientación principal específica. Por defecto, es en horizontal (en fila).
• Eje secundario. Los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical, y viceversa.

justify-content

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

<style>
	.containerFlex{
		display: flex;
		justify-content: flex-startflex-endcenterspace-betweenspace-aroundspace-evenly;
	}
	.colKhaki{
		background: Khaki;
	}
	.colGreen{
		background: paleGreen;
	}
	.colSalmon{
		background: salmon;
	}
	.col{
		width: auto100px
	}
</style>

align-items

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

<style>
	.containerFlex{
		display: flex;
		align-items: stretch (valor por defecto)flex-startflex-endcenterbaseline;
	}
	.colKhaki{
		background: Khaki;
	}
	.colGreen{
		background: paleGreen;
	}
	.colSalmon{
		background: salmon;
	}
	.column{
		width:150px
	}
</style>

align self

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

<style>
	.containerFlex{
		display: flex;
	}
	.colKhaki{
		background: Khaki;
	}
	.colGreen{
		background: paleGreen;
		align-self: stretchflex-startflex-endcenterbaseline;
	}
	.colSalmon{
		background: salmon;
	}
	
</style>

Ejercicio panteón con display flex

Video del ejercicio propuesto

Video ejercicio resuelto

Páginas interesantes

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)

<style>
	.container{
		display: flex;	
	}
	.colKhaki{
		background: Khaki;
		order: 0 (por defecto)123;
	}
	.colGreen{
		background: paleGreen;
		order: 0 (por defecto)123;
	}
	.colSalmon{
		background: salmon;
		order: 0 (por defecto)123;
	}
	.column{
		width: 300px
	}
</style>

Cambiar el tamaño de las columnas con flex

flex: 0 0 100px;

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 100px; /* width/height  - initial value: auto */

<style>
	.container{
		display: flex;
	}

	.rosa{
		background: pink;
		flex: 0 0 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>

Problemilla en firefox

Cuando en firefox usamos display flex y dentro de la capa tenemos una imagen, esta se deforma, en lugar de mantener sus proporciones.

Para evitar esto, le asignaremos este estilo a la imagen:

flex: 0 1 auto

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

<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>

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’).