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

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

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