display flex

Curso de HTML

32.  
35.  
38.  
46.  
55.  

Flexbox es un sistema de maquetación especialmente apropiado para hacer estructuras de una sola dimensión (filas o columnas, en lugar de una regilla de elementos). Para utilizar esta metodología de maquetación, utilizaremos el estilo display:flex.

Llamaremos contenedores flexibles a los elementos que hay dentro de un elemento que usa el estilo 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: 
	}
	.colKhaki{
		background: Khaki; 
	}
	.colSalmon{
		background: salmon;
	}

</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

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: ;
	}
	.col{
        	border:1px solid black;
		width: 
	}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

flex-flow

flex-flow:row wrap;

O lo que es lo mismo:

flex-direction: row;
flex-wrap: wrap
<style>
	.containerFlex{
		display: flex;
		flex-flow:  ;
	}
	.colKhaki{
		background: Khaki; 
	}
	.colSalmon{
		background: salmon;s
	}
	.col{
		width: 
	}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

Ejercicio 3 columnas con flex

display flex 1
Descarga la imagen superior para hacer el ejercicio

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;
}
display flex 2
<style>
	.containerFlex{
		display: flex;
		justify-content: ;
	}
	.colKhaki{
		background: Khaki;
	}
	.colGreen{
		background: paleGreen;
	}
	.colSalmon{
		background: salmon;
	}
	.col{
		width: 
	}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

align-items

#wrapper{
	display: flex;
	align-items: flex-start | flex-end | center | baseline | stretch;
}
display flex 3
<style>
	.containerFlex{
		display: flex;
		align-items: ;
	}
	.colKhaki{
		background: Khaki;
	}
	.colGreen{
		background: paleGreen;
	}
	.colSalmon{
		background: salmon;
	}
	.col{
		width:150px
	}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

align self

#wrapper{
	display: flex;
	align-self: flex-start | flex-end | center | baseline | stretch;
}
display flex 4
<style>
	.containerFlex{
			display: flex;
	}
	.colKhaki{
		background: Khaki;
	}
	.colGreen{
		background: paleGreen;
		align-self: ;
	}
	.colSalmon{
		background: salmon;
	}
	
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

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: ;
	}
	.colGreen{
		background: paleGreen;
		order: ;
	}
	.colSalmon{
		background: salmon;
		order: ;
	}
	.col{
		width: 300px
	}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

Páginas interesantes

Cambiar el tamaño de las columnas con flex

Usaremos este código:

flex: 0 0 100px;

Que es una abreviatura de este:

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.

display flex 5

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

flex: 0 1 auto

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’).
← Ejercicios de etiquetas y selectores en CSS
Estilo CSS background para las imágenes de fondo →

Aviso Legal | Política de privacidad