duduromeroa.com

Breve estudio de las propiedades de CSS flex-box (Marz. 13-2023)

• SE RECOMIENDA revisar siempre la disponibilidad de las propiedades flex-box en navegadores con 'CAN I USE'
• SE RECOMIENDA revisar los ejemplos dados aquí desde la ventana 'inspector' del navegador; además de abrir y cerrar la ventana del navegador para evaluar el comportamiento de los elementos de cada propiedad flex.
• Fuentes: Ben Frain (2022). Responsive Web Design with HTML5 and CSS- 4ta edición; Chat transformador preentrenado generativo ('Generative Pre-trained Transformer, GPT) y ejercicios propios.
• Última modificación: marzo 22 del 2023 : 21h48

Estructura del estudio CSS FlexBox

• || Propiedad CSS 'display' valor 'flex'***
•   Tipos de ejes
•   Estructura del contenedor con 'display: flex;'
•   Propiedades de la propiedad 'display: flex;'
•   'flex-direction' y valores
•   'flex-wrap' y valores
•   'flex-flow' y valores
•   'justify-content' y valores
•   'align-items' y valores
•   'align-content' y valores


• || Propiedad CSS de item 'flex' y valores ***
•   'order' y valores
•   'flex-grow' y valores
•   'flex-shrink' y valores
•   'flex-basis' y valores
•   'align-self' y valores
•   'display': inline-flex

PROPIEDAD 'DISPLAY': VALOR 'FLEX';

Características generales de valores flex

https://www.w3schools.com/css/css3_flexbox.asp

Estas eran las estrategias de diseño web antes del flex-box:

• 1. Bloque, para secciones de una página web
• 2. Inline, para texto
• 3. Tabla, para datos de tablas bidimensionales
• 4. Posicionado, para la posición explícita de un elemento
• 6. Maquetación en una sola dimensión -o en fila, o en columna, pero nunca ambas al mismo tiempo

DOS TIPOS DE EJES (AXIS)

• EJE PRINCIPAL: eje a lo largo del cual se disponen los elementos flexibles y está determinado por la propiedad 'flex-direction:...' del contenedor.
• EJE TRANSVERSAL o CROSS: será el eje transversal al eje principal.


• Las propiedades que inician con la palabra 'align-' [align-items, align-self, align-content] solo influirán en el eje contrario (o transversal) al eje principal dado por 'flex-direction:...;'
• Mientras que algunas propiedades que inicien con la palabra 'flex' y 'justify' solo afectan al eje dado por 'flex-direction', es decir, el eje principal.

Abajo: las flechas celestes dan el eje principal. Las flechas blancas punteadas el eje transversal.

Con Flex-box:

• Evitamos usar propiedades CSS float o position cuando deseamos ser responsives. Es decir, evitamos tener que obligar a los elementos a colocarse al lado, arriba, abajo o en el centro de un contenedor y entre otros elementos que deben ser adaptables a varias pantallas.

Ejemplo con flex box y margin:

Un ejemplo con centrado de div:

ESTRUCTURA DEL CONTENEDOR CON PROPIEDAD DISPLAY Y VALOR FLEX

Todo contenedor que necesite la propiedad 'flex' debe activar la regla 'display: flex;'. Ejemplo:

Ejemplo abajo:

• Solo el contenedor tiene 'display: flex;' activado
• Cada hijo tiene 'width: 90px;'
• OJO: Cada HIJO es 'display: block;'
• Cada hijo tiene 'height: 90px;'
• El contenido no está centrado ni ajustado en posición alguna

Ejemplo abajo:

• OJO como los elementos solo se estrechan al cerrar la ventana, no se 'pasan' abajo, como si fueran bloques.

PROPIEDADES DE PROPIEDAD DISPLAY, VALOR 'FLEX'

Todo contenedor que necesite la propiedad 'flex' debe activar la regla 'display: flex;'. Ejemplo:

CLAVES DE COLOR:

Los contenedores flex tendrán el color morado claro.

Los elementos hijos del contenedor flex tendrán el color morado obscuro.

Propiedad 'flex-direction: 'value';'

Define la dirección del EJE PRINCIPAL en un contenedor flex. Hay dos ejes principales: vertical y horizontal.

:: Valores de 'flex-direction:'

• PARA EJE HORIZONTAL
• flex-direction: row; [default]...ordena los elementos en línea horizontal. Su eje transversal será vertical.
• flex-direction: row-reverse;...ordena los elementos horizontales de izq a der.
• PARA EJE VERTICAL
• flex-direction: column;...ordena los elementos en una columna vertical. Y su eje transversal será horizontal.
• flex-direction: column-reverse;...reordena los elementos verticales hijos, alterando su posición anterior (de mayor a menor).

Ejemplos con 'flex-direction: row;' [valor por default]

• Contenedor 'display: flex;'
• Contenedor 'flex-direction: row;' [valor por default]
• Cuando no esté explícita esa propiedad será 'flex-direction: row' por default.
• Aquí el eje principal es HORIZONTAL

Ejemplos con 'flex-direction: row-reverse;'

• Aquí el eje principal es HORIZONTAL
• Contenedor 'display: flex;'
• Contenedor 'flex-direction: row-reverse;'
• Invierte orden lineal

Ejemplos con 'flex-direction: column;'

• Contenedor con 'display: flex;'
• Contenedor con 'flex-direction: column;'
• Aquí el eje principal es VERTICAL
• Ojo como hay un espacio entre recuadros

Ejemplos con 'flex-direction: column-reverse;'

• Contenedor con 'display: flex;'
• Contenedor con 'flex-direction: column-reverse;'
• Aquí el eje principal es VERTICAL
• Ojo como hay un espacio entre recuadros

Propiedad flex-wrap: y sus valores

• Especifica si los elementos flex deben ajustarse o no si desbordan su contenedor a lo largo del eje principal -sea vertical u horizontal-.
• 'flex-wrap: nowrap;' [default]. Apretará los elementos en linea de texto.

Ejemplos con propiedad flex-wrap: wrap;

• Los items flex se reagrupará en una nueva línea cuando el espacio sea estrecho y no puedan ocupar esa primera línea (fila o columna según el caso).
• 'min-width' evita que el ancho sea más pequeño que el ancho dado en pixeles

Valores para propiedad 'flex: 'values';

• Esa propiedad combina tres sub propiedades:
• 'flex-grow:'... especifica cuánto DEBE crecer el elemento flex si hay espacio disponible en el contenedor. Con valor de 0 NO CRECERÁ más allá de su tamaño inicial. Con valor mayor a cero crecerá proporcionalmente a los otros items en el contenedor. Con valor de 1 el elemento ocupará todo el espacio disponible.


• 'flex-shrink:'... especifica cuánto debe reducirse el elemento flexible si no hay suficiente espacio disponible en el contenedor. Un valor de 0 significa que el elemento no se encogerá en caso de NO HABER espacio; y un valor superior a 0 lo encogerá proporcionalmente a los demás elementos del contenedor.


• 'flex-basis:'...especifica el tamaño inicial del elemento flexible antes de que se distribuya cualquier espacio adicional. Puede configurarlo en una 'dimensión específica' (como 'flex-basis: 200px;') o un porcentaje (como 'flex-basis: 50%;').
• OJO: la dimensión específica dependerá del eje. Si es horizontal (ancho) o vertical (alto).
• 'flex-direction: row;' (--[default si no está explícito]-- es para ancho del item)
• 'flex-direction: column;' (para alto del item)

Por lo tanto, el atajo dado por 'flex:...' se leería de la siguiente forma:

• 'flex: 1;'...[un valor] corresponde al valor 'flex-grow:'. El resto de valores 'flex-shrink y flex-basis' estan en default.


• 'flex: 1 0;'... [dos valores] corresponden a 'flex-grow' y 'flex-shrink'. Mientras que 'flex-basis' estará en auto. El primer valor de 1 pide que el elemento ocupe todo el espacio disponible, y el segundo valor pide que no se encoja si NO HAY espacio suficiente.


• 'flex: 1 0 200px;'...[tres valores] corresponden a los tres valores flex (flex-grow | -shrink | -basis). Esos valores dicen: 'el elemento crecerá para ocupar todo el espacio disponible, no se reducirá si no hay suficiente espacio y tendrá un tamaño inicial de 200px'.


• Como ejemplos tenemos:

Ejemplos con propiedad 'flex-wrap: nowrap;'

• Los elementos NO bajarán a una nueva línea en caso que el espacio disponible sea limitado o esté estrechándose.
• Recordar: cuando no se explícita el 'flex-direction', por DEFAULT será row (ancho).

Ejemplos con propiedad 'flex-wrap: wrap-reverse;'

• Esta ves los elementos se ajustarán y crearán una nueva línea de elementos en caso de haber poco espacio. PERO, los elementos crearán la nueva línea hacia ARRIBA, y no hacia abajo.
• El orden lineal de los elementos NO se alterará.
• Recordar que 'flex-direction' está en default (row, ancho) pues no está explícito en el código.

Propiedad 'flex-flow: 'valor'

• Se aplica en el elemento contenedor, luego de activar 'display: flex;'
• Atajo para valores de 'flex-direction' [row o column] y 'flex-wrap' [wrap y nowrap].
• Ejemplo: La regla 'flex-flow: row wrap;' dice: el eje es horizontal (ancho y alto) y el wrap es 'wrap' (que se ajuste y se cree nueva línea en caso de que el espacio sea reducido).

Posibles casos de uso son:

Recordar valores para 'flex-direction:'...

Recordar valores para 'flex-wrap:'...

PROPIEDAD justify-content

Alinea items flex según el eje PRINCIPAL, explícito en 'flex-direction'.

Por default, ninguno de estos valores permite crear una nueva línea de elementos en caso de estrechar espacio (a menos que se explícite).

Los valores de 'justify-content:...' son:

• flex-start; [es default si es omitido] ... alinea los items flex a la izquierda (left) del contenedor flex.
• flex-end;... alinea los items flex a la derecha (right) del contenedor flex. NO altera el orden de los elementos internos.
• center; centra horizontalmente
• space-between; Distribuye los items en el contenedor con similar espacio entre ellos; pero 'pega' el primer y el último elemento al tope de los lados derecho e izquierdo del browser.
• space-around;...Distribuye los items en el contenedor con el mismo espacio ALREDEDOR de ellos. OJO como el primer y último elemento SÍ presentan un espacio a los lados.
• space-evenly;...Distribuye los items con similar espacio alrededor y entre los items.

INTRODUCCIÓN: Breves ejemplos con valores de 'justify-content:...;'. Ojo que solo se apunta a los elementos div hijo de cada contenedor con id dado.

Ejemplo con 'justify-content: flex-start;'

Ejemplo con 'justify-content: flex-end;'

Ejemplo con 'justify-content: center;'

Ejemplo con 'justify-content: space-between;'

Ejemplo con 'justify-content: space-around;'

• En contenedor flex está 'flex-wrap: wrap;'. Eso permite crear nueva línea de elementos...

Ejemplo con 'justify-content: space-evenly;'

• En contenedor flex está 'flex-wrap: wrap;'. Eso permite crear nueva línea de elementos...

Y qué si deseo ajustar el ESPACIO ENTRE ITEMS?

• Insertar en las reglas del contenedor la propiedad 'gap: 00px'.
• Ya que 'gap' podría aún no estar disponible para todos los browsers, también se puede usar la propiedad 'margin' en los items flex para ajustar la brecha entre ellos.

Ejemplo con 'justify-content: space-around;' y propiedad 'gap'; o 'margin' y 'flex-wrap: wrap;'

• En contenedor flex está 'flex-wrap: wrap;'. Eso permite crear nueva línea de elementos...

Ejemplos finales con valores en la propiedad 'justify-content: ...;'

PROPIEDAD 'align-items: 'value';

Controla cómo se alinean los elementos flexibles a lo largo del eje transversal de su contenedor. El eje transversal es el eje perpendicular al eje principal del contenedor flexible.

RECORDAR: 'align-items:...' SOLO afecta al eje principal del contenedor. Es decir, al eje dado por 'flex-direction: row' u omitido para activar default.

RECORDAR: Cuando 'flex-direction':...; no es una regla CSS explícita en el contenedor flex, TODO será row. Es decir, el eje principal será horizontal, y el eje transversal será vertical. Es en este último eje que 'align-items:...' alineará los elementos hijos flex.

Valores de 'align-items:...'

• 'stretch (default);'...los elementos se estiran para llenar el contenedor a lo largo del eje principal. Este eje variará si flex-direction es row o column.
• 'flex-start;'...alinea los elementos al inicio del contenedor a lo largo del eje transversal.
• 'flex-end;' ...alinea los artículos al final del contenedor a lo largo del eje transversal.
• 'center;' ...alinea los elementos con el centro del contenedor a lo largo del eje transversal.
• 'baseline;'...alinea los elementos con sus líneas de base, que es la línea en la que se asienta el texto.

EJEMPLO DE 'align-items:...' VALOR 'stretch (default. es decir, si NO está explícito, se aplica esta regla.);'

• Si alguno de los artículos tiene una altura establecida o se dimensiona utilizando una flex-basis, entonces no se estirará para llenar el contenedor.


• Ojo que align-items afecta la alineación del eje principal de los elementos. Si desea controlar la alineación del eje principal de los elementos, puede utilizar la propiedad justify-content el contenido.


• En este ejemplo se le da también dimensiones a uno de los elementos (amarillo).


• RECORDAR: Al omitir 'align-items: stretch;' se establece esta misma regla por default.

Como primer sencillo ejemplo, pocos elementos. Donde cada item tiene 'width: 50%;

En otro ejemplo, solo uno de los elementos tiene 'width: 45%;':

EJEMPLO DE 'align-items:...' VALOR 'flex-start'

• Alinea los items flex desde el inicio del contenedor flex en el eje principal del contenedor.
• Si se activa 'flex-direction: row-reverse;' el inicio se dará desde la izquierda hacia la derecha (ejemplo abajo):

EJEMPLO DE 'align-items:...' VALOR 'flex-end'

• Afecta al eje transversal (el eje contrario al eje principal). En este caso, afectará al eje transversal vertical o arriba/abajo, pues el flex-direction está en row -column-.
• sss

EJEMPLO DE 'align-items:...' VALOR 'center'

• Afecta el eje transversal

EJEMPLO DE 'align-items:...' VALOR 'baseline'

• Afecta el eje transversal

En otro ejemplo de 'align-items: baseline;'

• Los elementos se posan o se asientan sobre una linea base imaginaria según sea horizontal o vertical. Eso dependerá del eje explícito dado por 'flex-direction'. En el ejemplo de abajo, el eje es 'row' (horizontal).
• En el ejemplo de abajo, ningún elemento tiene explícito valores de ancho y alto. Por lo que cada elemento se envolverá de su contenedor según el propio espacio del elemento.

En este nuevo ejemplo, el eje ha cambiado de valor 'row' (horizontal) a valor 'column' (vertical). Por lo que la línea base será así mismo vertical.

• Los elementos se posan o se asientan sobre una linea base imaginaria según sea horizontal o vertical. Eso dependerá del eje explícito dado por 'flex-direction'. En el ejemplo de abajo, el eje es 'row' (horizontal).
• En el ejemplo de abajo, ningún elemento tiene explícito valores de ancho y alto. Por lo que cada elemento se envolverá de su contenedor según el propio espacio del elemento.

PROPIEDAD 'align-content:...' sus valores

• Controla cómo filas y columnas son alineados y espaciados según el eje transversal dentro del contenedor flex.
• Solo se aplica cuando hay varias líneas de artículos flexibles y cuando el tamaño combinado de esas líneas es menor que el tamaño del contenedor flexible en el eje transversal.
• El valor de 'stretch' es default.
• El comportamiento de 'align-content' dependerá de si hay espacio adicional en el eje transversal o no.
• Si hay espacio adicional, afecta el espacio entre las líneas. Si no hay espacio adicional, afecta la alineación de las líneas dentro del contenedor.
• Trabaja muy bien con 'flex-wrap: wrap;' o 'flex-wrap: wrap-reverse;'. Estas permiten múltiples líneas de items cuando, por ejemplo, el espacio del eje transversal es reducido.
• No ocupa ni obliga a que los items flex ocupen espacio restante del contenedor.

DIFERENCIAS DE 'align-content:...' CON 'justify-content:...'

Son muy similares excepto por lo siguiente:

• align-content: alinea según eje TRANSversal.
• justify-content: alinea según eje PRINCIPAL.

VALORES DE 'align-content:...'

• flex-start; [es default si es omitido] ... alinea los items flex a la izquierda (left) del contenedor flex.
• flex-end;... alinea los items flex a la derecha (right) del contenedor flex. NO altera el orden de los elementos internos.
• center; centra horizontalmente
• space-between; Distribuye los items en el contenedor con similar espacio entre ellos; pero 'pega' el primer y el último elemento al tope de los lados derecho e izquierdo del browser.
• space-around;...Distribuye los items en el contenedor con el mismo espacio ALREDEDOR de ellos. OJO como el primer y último elemento SÍ presentan un espacio a los lados.
• space-evenly;...Distribuye los items con similar espacio alrededor y entre los items.

Ejemplo con 'align-content: flex-start;'

Afecta al eje transversal del contenedor (es decir, sumará nuevas líneas desde el inicio hasta el final según sea el eje principal y el eje transversal). Si es espacio del eje transversal es menor, se creará una nueva línea de elementos.

Si los items flex ocupan menos espacio que el eje transversal del contenedor flexible, se alinearán al comienzo del eje transversal, dejando espacio adicional al final.

En otras palabras, cuando hay espacio sobrante los items no lo ocupan. Solo inician desde la primera linea y luego, dejan el espacio sobrante sin llenarlo.

Nota: Apretar el ancho del browser para ver el efecto.

Ejemplo con 'align-content: flex-end;'

• Los items flex se reorganizan en una nueva línea cuando el eje transversal es reducido
• Items son colocados y alineados al final del contenedor, dejando extra espacio arriba.

Ejemplo con 'align-content: center;'

• Items flex son centrados a lo largo del eje transversal
• También permite crear múltiples líneas en caso que el eje de transversal se reduzca.

Ejemplo con 'align-content: space-between;'

• Distribuye a lo largo del eje transversal con igual espacio entre cada fila y entre líneas.
• No tiene efecto si existe una sola línea de elementos que no será afectada por un espacio reducido.

Ejemplo con 'align-content: space-around;'

• Aplica en el contenedor 'flex-wrap: wrap;' para crear nueva línea de elementos en el eje transversal.
• Difiere de 'align-content: space- between;' porque este último distribuye el espacio uniformemente solo entre los elementos, sin espacio agregado antes del primer elemento o después del último elemento.
• Los espacios entre items dependerá del tamaño del contenedor y del número te items flex. El espacio sobrante se distribuye entre las líneas.

Nota: Cuando se apreta más el contenedor, el eje transversal reduce el espacio entre líneas. Pero mientras más extenso sea el contenedor, más espacio existe habrá entre líneas.

• En 'align-content: space-around;' el espacio entre líneas puede parecer más ancho que el espacio entre elementos porque el espacio se distribuye uniformemente entre las líneas y en los bordes del contenedor.
• Esto significa que además del espacio entre los elementos, también se agrega espacio entre el primer/último elemento y el borde del contenedor. Como resultado, el espacio entre líneas puede parecer más ancho, especialmente si el contenedor es relativamente estrecho y/o el número de artículos por línea es pequeño.
• Sin embargo, la cantidad de espacio agregado entre líneas y en los bordes del contenedor está determinada en última instancia por el tamaño del contenedor y la cantidad de artículos en cada línea. Entonces, en algunos casos, el espacio entre líneas puede no parecer muy amplio, especialmente si el contenedor es lo suficientemente ancho para acomodar los artículos con un espacio mínimo entre ellos.

Ejemplo con 'align-content: space-evenly;'

• En contenedor flex está 'flex-wrap: wrap;'. Eso permite crear nueva línea de elementos...

duduromeroa.com

Propiedades de items flex (Marz. 14-2023)

Propiedades 'order: 'value';

• 'order: 'valor';'... Da el orden de los items flex.
• Usa la regla { order : 'valor' } con el número de la nueva posición del item flex.
• Enteros con valor bajo se muestran primero en el contenedor.
• Enteros con valor alto se mostrarán al final del contenedor.

Propiedad 'flex-grow: 'value';

• Especifica cuánto crecerá un item flex en relación con el resto de los elementos flexibles y siempre que exista espacio disponible.
• Cada valor dado a flex-grow da la proporción (cuántas veces) de crecimiento.
• En el ejemplo de abajo, cada item tiene una proporción de '1'.
• OJO: Valores de cero impiden que el item crezca en caso de haber espacio disponible.

• Luego, se cambiará la proporción de alguno de sus items:
• OJO: Tomar en cuenta el ancho explícito dado para cada item.
• En el ejemplo de abajo, el item rojo tiene valor cero. Lo que significa que no se alterará si se modifica browser.

Propiedad 'flex-shrink: 'value';

• Especifica cuánto se encogerá (o NO se encogerá) un item flex en relación con el resto de items flex.
• Valores de '0' dicen "no encoger si el contenedor apreta".

Podríamos entenderlo como una fórmula donde tenemos las siguientes variables:

• AnchoContenedor (aC)
• CantidadItems (cI)
• AnchoCadaItem (acI)

Con cada item flex de valor '1' cada item se comprimirá por una cantidad de

• AnchoContenedor / CantidadItems = nuevo ancho de item

Pero si solo uno de los items tiene un 'flex-shrink: 2;' este item se comprimirá dos veces más que cada uno de los demás que solo tienen un valor de 1.

En el ejemplo de abajo, todos los elementos tienen un valor de 'flex-shrink: 1':

Y en el nuevo ejemplo de abajo, solo el primer item tiene un valor de flex-shrink: 2;

• A más alto el valor de 'flex-shrink:', más compresión.

Propiedad 'flex-basis: 'value';

• Da el ancho inicial a un item flex antes de que este sufra de estiramiento o comprensión por alteración de tamaño del browser o cuando algún espacio residual deba ser reordenado.
• Permite valores absolutos en pixeles, o porcentajes.
• Valor 'auto' dice que el valor inicial del item flex estará basado en el contenido.
• Afecta al eje principal.

En el ejemplo de abajo el item verde tiene 'flex-basis: 159px;' con un valor en pixeles. Ese valor impide que el item altere sus dimensiones cuando se altere los tamaños del browser. Pero 'flex-basis:...' con valor de porcentaje SÍ alteraría las dimensiones del item flex.

En otras palabras, las dimensiones del item 'UNO' no cambiarán al alterar las dimensiones del browser. El resto de elementos sí se modificarán en sus dimensiones.

• OJO. El tamaño inicial del item será dado por 'flex-basis: [value]', pero ese mismo tamaño dependerá del espacio disponible, la relación entre items.

En otro ejemplo, el valor de 'flex-basis: ...' de la caja verde es un porcentaje. Ese porcentaje dará un valor inicial pero modificará el item cuando las dimensiones del browser se alteren.

En otro ejemplo, se aplican propiedades 'flex-direction: row;' y 'align-items: center;' al contenedor flex, y 'height: ..px;', al item verde con 'flex-basis: [value];'

DIFERENCIAS ENTRE 'flex-grow:...' y 'flex-basis:...':

• 'flex-grow'... usado para exigir hasta dónde un item puede crecer en dimensiones en relación a otros items y al espacio sobrante.
• 'flex-basis'... da las dimensiones iniciales de un item flex antes de reorganizar el espacio sobrante al modificar las dimensiones del browser.

Propiedad 'align-self: 'value';

• Indica qué alineación en el eje transversal dará al item flex dentro de un contenedor flex.
• Sobreescribe la alineación dada por la propiedad 'align-items'.
• Acepta los mismos valores que 'align-items:...':

Valores 'align-self: 'value'; [Recordar, afecta el eje transversal]

• 'stretch (default);'...los elementos se estiran para llenar el contenedor a lo largo del eje principal. Este eje variará si flex-direction es row o column.
• 'flex-start;'...alinea los elementos al inicio del contenedor a lo largo del eje transversal.
• 'flex-end;' ...alinea los artículos al final del contenedor a lo largo del eje transversal.
• 'center;' ...alinea los elementos con el centro del contenedor a lo largo del eje transversal.
• 'baseline;'...alinea los elementos con sus líneas de base, que es la línea en la que se asienta el texto.

Propiedad 'display:...' con valor 'inline-flex;'

• Similar al activador de contenedor 'display: flex;'
• Pero a diferencia de esa propiedad, el valor 'inline-flex;' le da al elemento flex las propiedades de un objeto 'inline/flex', en vez de darle propiedades 'block-flex'.
• En otras palabras, un elemento con 'display: inline-flex;' es un elemento en línea (mostrado uno al lado del otro) pero con la habilidad de vestirse con las propiedades flex. para reordenar elenentos hijos.
• Afecta al eje principal.

Nuevo ejempplo: