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.

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;
	}
	.col{
        	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;s
	}
	.col{
		width: auto300px
	}
</style>

Ejercicio 3 columnas con flex

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

<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;
	}
	.col{
		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>

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;
	}
	.col{
		width: 300px
	}
</style>

Páginas interesantes

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