UF1304 | UD02

UD02 | Plantillas en la construcción de páginas Web

CSS | FLEX

Introducción

Se presentan los contenedores con display de tipo flex e inline-flex

Declaración display: inline-flex;, establece un contenedor en línea, es similar a inline-block ya que ocupa solo el contenido.
Ejemplo:

.flex{

    display: inline-flex;

}

Declaración display: flex;, establece un contenedor en bloque, es similar a block ya que ocupa todo el ancho del padre.
Ejemplo:

.flex{

    display: flex;

}

T020-00-flexbox-flex-direction.html

Se presentan los contenedores flex con la declaración flex-direction

Declaración flex-direction: row, establece la dirección del eje principal en horizontal.
Ejemplo:

.flex{

    display: flex;

    flex-direction: row;

}

Declaración flex-direction: row-reverse, establece la dirección del eje principal en horizontal‑invertido.
Ejemplo:

.flex{

    display: flex;

    flex-direction: row-reverse;

}

Declaración flex-direction: column, establece la dirección del eje principal en vertical.
Ejemplo:

.flex{

    display: flex;

    flex-direction: column-reverse;

}

Declaración flex-direction: column-reverse, establece la dirección del eje principal en vertical-invertido.
Ejemplo:

.flex{

    display: flex;

    flex-direction: column-reverse;

}

T030-flexbox-flex-wrap.html

Se presentan los contenedores flex con la declaración flex-wrap

Declaración flex‑wrap: wrap;, establece la dirección del eje principal en horizontal.
Ejemplo:

.flex{

    display: flex;

    flex‑wrap: wrap;

}

Declaración flex‑wrap: nowrap;, establece los ítems en una sola línea, no permitiendo que se desborde el contenedor, por lo que flexbox reajusta los ítems flexibles para que quepan todos en la misma línea.
Ejemplo:

.flex{

    display: flex;

    flex‑wrap: nowrap;

}

Declaración flex‑wrap: wrap-reverse;, establece los ítems en modo multilínea permitiendo que se desborde el contenedor.
Ejemplo:

.flex{

    display: flex;

    flex-direction: column-reverse;

}

Declaración flex‑wrap: wrap;, establece los ítems en modo multilínea, pero en dirección inversa
Ejemplo:

.flex{

    display: flex;

    flex‑wrap: wrap-reverse;

}

T040-flexbox-flex-flow.html

Se presentan los contenedores flex con la declaración flex-flow

La propiedad de atajo (short‑hand) llamada flex‑flow, permite resumir los valores de las propiedades flex‑direction y flex‑wrap en una sola propiedad.
Ejemplo:

.flex{

    display: flex;

    flex‑flow: row nowrap;

}

T050-flexbox-alineacion-justify-content.html

Se presentan los contenedores flex con la declaración justify-contentque permite alinear los ítems del eje principal que por defecto es el horizontal.

La declaración justify‑content: flex-start;, agrupa los ítems al principio del eje principal.
Ejemplo:

.flex{

    display: flex;

    justify‑content: flex-start;

}

La declaración justify‑content: flex-end;, agrupa los ítems al final del eje principal.
Ejemplo:

.flex{

    display: flex;

    justify‑content: flex-end;

}

La declaración justify‑content: center;, agrupa los ítems al centro del eje principal.
Ejemplo:

.flex{

    display: flex;

    justify‑content: center;

}

La declaración justify‑content: space‑between;, distribuye los ítems dejando el máximo espacio para separarlos.
Ejemplo:

.flex{

    display: flex;

    justify‑content: space‑between;

}

La declaración justify‑content: space‑around;, distribuye los ítems dejando el mismo espacio alrededor de ellos (izq/dcha).
Ejemplo:

.flex{

    display: flex;

    justify‑content: space‑around;

}

La declaración justify‑content: space‑evenly;, distribuye los ítems dejando el mismo espacio (solapado) a izquierda y derecha.
Ejemplo:

.flex{

    display: flex;

    justify‑content: space‑evenly;

}

T060-flexbox-alineacion-align-content.html

Se presentan los contenedores flex con la declaración align-contentque permite ajustar cada una de las líneas del contenedor multilinea.

La declaración align‑content: flex-start;, ajusta las líneas desde el inicio del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align‑content: flex-start;

}

La declaración align‑content: flex-end;, ajusta las líneas desde el final del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align‑content: flex-end;

}

La declaración align‑content: center;, ajusta las líneas al rededor del centro del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align‑content: center;

}

La declaración align‑content: space‑between;, distribuye las líneas a lo largo del eje transversal, de principio a fin.
Ejemplo:

.flex{

    display: flex;

    align‑content: space‑between;

}

La declaración align‑content: space‑around;, distribuye las líneas a lo largo del eje transversal, igualmente espaciados.
Ejemplo:

.flex{

    display: flex;

    align‑content: space‑around;

}

La declaración align‑content: stretch;, estira las líneas para que ocupen el eje transversal completo.
Ejemplo:

.flex{

    display: flex;

    align‑content: stretch;

}

T070-flexbox-alineacion-place-content.html padding padding

Se presentan los contenedores flex con la declaración place-content.

La declaración place-content es un atajo con la que se pueden establecer los valores de align‑content y de justify‑content de una sola vez.
Ejemplo:

.flex{

    display: flex;

    place‑content: flex‑start flex‑end;

}

T080-flexbox-alineacion-align-item.html

Se presentan los contenedores flex con la declaración align-items para alinear cada uno de los items dentro de sus respectivas líneas.

La declaración align-items: flex-start;, ajusta los items, en sus respectivas líneas, desde el inicio del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-items: flex-start;

}

La declaración align-items: flex-end;, ajusta los items, en sus respectivas líneas, al final del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-items: flex-end;

}

La declaración align-items: center;, ajusta los items, en sus respectivas líneas, en el centro del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-items: center;

}

La declaración align-items: stretch;, distribuye los items, en sus respectivas líneas, desde el inicio hasta el final del eje transversal. Los items con una altura fijada se ajustan al inicio del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-items: stretch;

}

Con la declaración align-items: baseline;, los items, en sus respectivas líneas, se alinean respecto de su línea base (sobre la que se apoyan los contenidos de texto).
Ejemplo:

.flex{

    display: flex;

    align-items: baseline;

}

See the Pen T080-flexbox-alineacion-align-item-embebido by Manuel (@gutiman) on CodePen.

T090-flexbox-alineacion-align-self.html

Se presentan la declaración align-items para alinear items convretos dentro de sus contenedores.

La declaración align‑self: flex-start;, ajusta los items seleccionados, en sus respectivas líneas, desde el inicio del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-self: flex-start;

}

La declaración align‑self: flex-end;, ajusta los items seleccionados, en sus respectivas líneas, al final del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-self: flex-end;

}

La declaración align‑self: center;, ajusta los items seleccionados, en sus respectivas líneas, en el centro del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-self: center;

}

La declaración align‑self: stretch;, distribuye los items seleccionados, en sus respectivas líneas, desde el inicio hasta el final del eje transversal. Los items con una altura fijada se ajustan al inicio del eje transversal.
Ejemplo:

.flex{

    display: flex;

    align-self: stretch;

}

La declaración align‑self: baseline;, los items seleccionados, en sus respectivas líneas, se alinean respecto de su línea base (sobre la que se apoyan los contenidos de texto).
Ejemplo:

.flex{

    display: flex;

    align-self: baseline;

}

La declaración align‑self: auto;, los items seleccionados, en sus respectivas líneas, se alinean respecto de su línea base (sobre la que se apoyan los contenidos de texto).
Ejemplo:

.flex{

    display: flex;

    align-self: auto;

}

See the Pen T090-flexbox-alineacion-align-self-embebido by Manuel (@gutiman) on CodePen.

T100-flexbox-propiedades-hijos-flex-grow.html

Se presentan la declaración flex-grow Indica el factor de crecimiento del ítem respecto al resto en el caso de que no tengan un ancho específico.

Ejemplo:

.flex{display: flex;}

.flex div:nth-of-type(1) {flex-grow: 0;}

.flex div:nth-of-type(2) {flex-grow: 1;}

.flex div:nth-of-type(3) {flex-grow: 0;}

.flex div:nth-of-type(4) {flex-grow: 2;}

.flex div:nth-of-type(5) {flex-grow: 0;}

See the Pen T100-flexbox-propiedades-hijos-flex-grow-embebido by Manuel (@gutiman) on CodePen.

T110-flexbox-propiedades-hijos-flex-baxis.html

Se presentan la declaración flex‑basis que determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma.

Declaración flex‑basis con valores absolutos.
Ejemplo:

.flex{display: flex;}

.flex div:nth-of-type(2) {flex-basis: 600px;}

/* Ocupará 300px cuando pueda ocuparlos */

<div class="flex">

    <div>-</div>

    <div>flex-basis: 600px;</div>

    <div>-</div>

    <div>-</div>

</div>

Declaración flex‑basis con valores relativos.
Ejemplo:

.flex{display: flex;}

.flex div:nth-of-type(2) {flex-basis: 50%;}

/* Ocupará 50% del contenedor cuando pueda ocuparlos */

<div class="flex">

    <div>-</div>

    <div>flex-basis: 50%</div>

    <div>-</div>

    <div>-</div>

</div>

See the Pen T110-flexbox-propiedades-hijos-flex-embebido by Manuel (@gutiman) on CodePen.

T120-flexbox-propiedades-hijos-flex-shrink.html

Se presentan la propiedad flex‑shrink que indica el factor de decrecimiento del ítem respecto al resto en el caso de que no tengan un ancho específico.

Ejemplo:

.flex div:nth-of-type(1) {flex-shrink: 1;}

.flex div:nth-of-type(2) {flex-shrink: 2;}

.flex div:nth-of-type(3) {flex-shrink: 1;}

.flex div:nth-of-type(4) {flex-shrink: 1;}

<div class="flex">

    <div>1</div>

    <div>2</div>

    <div>1</div>

    <div>1</div>

</div>

See the Pen T120-flexbox-propiedades-hijos-flex-shrink-embebido by Manuel (@gutiman) on CodePen.

T130-flexbox-huecos.html

Se presentan las propiedades row‑gap, column‑gap y gap.

La propiedad row‑gappermiten establecer el tamaño de un «hueco» entre entre las filas de un contenedor flex multilínea sin necesidad de utilizar padding o margin en los elementos hijos.
Ejemplo:

.flex {

    display: flex;

    flex-direction: column;

    row-gap: 1em;

}

<div class="flex">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>

La propiedad column‑gappermiten establecer el tamaño de un «hueco» entre entre las columnas de un contenedor flex multilínea sin necesidad de utilizar padding o margin en los elementos hijos.
Ejemplo:

.flex {

    display: flex;

    flex-direction: row;

    column-gap: 1em;

}

<div class="flex">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>

La propiedad gappermiten establecer el tamaño de un «hueco» entre entre las columnas y las filas de un contenedor flex multilínea sin necesidad de utilizar padding o margin en los elementos hijos.
Ejemplo:

.flex {

display: flex;

flex-wrap: wrap;

gap: 1em;

}

<div class="flex">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</div>

See the Pen T130-flexbox-huecos-embebido by Manuel (@gutiman) on CodePen.