duduromeroa.com

Breve estudio de las propiedades de CSS flex-box (Abr. 9-2023)

Ir a estudio de propiedad CSS Grid

Estructura del estudio CSS FlexBox


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:

DOS TIPOS DE EJES (AXIS)

Abajo: las flechas más gruesas dan el eje principal cuando el flow-direction está explícito -en forma de regla CSS- o default -no insertadas- en el contenedor 'display:flex';. Las flechas blancas punteadas serán el eje transversal. Sin embargo, en caso que se explícite 'flow-direction: column' los ejes variarán.

Gráfico explicativo del eje principal y eje secundario según los criterios de la propiedad CSS Flex-box. duduromeroa.com

Con Flex-box:

Ejemplo con flex box y margin:

Un ejemplo con centrado de div:

HOLA
DUDU

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:

hijo

hijo

hijo

Ejemplo abajo:

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

Sin embargo, cuando activamos 'flex-wrap: wrap' en el contenedor los elementos hijo pasarán a formar una nueva fila. Puesto que el 'flow-direction: row' está default. Las nuevas filas serán añadidas siempre que el ancho del navegador se estreche:

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

Por otro lado, se toma el reciente ejemplo de arriba, pero se le agrega en el contenedor la propiedad y el valor 'justify-content: space-between;'. Esa regla da espaciado automático a lo largo de la fila según el ancho del navegador se estreche:

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo

hijo


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:'

flexbox

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

El ejemplo de abajo tiene las siguientes reglas:

AAbanico

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro


Ejemplos con 'flex-direction: column;'

Sin embargo, ya que el contenedor no tiene la regla flex-wrap: wrap, no se crearán nuevas columnas en caso de que el contenedor tenga menos altura.

Col a

Col 2

Col 3

Col 4

En este siguiente ejemplo sí se crearán nuevas columnas al reducir el alto del contenedor. Este sí tiene la regla 'flex-wrap: wrap;'activada, además de alineado horizontal y distribución de espacio vertical.

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 7

Col 8s


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

AAbanico

BBotica

CComedor

ZZorro


Propiedad flex-wrap: y sus valores

Ejemplos con propiedad flex-wrap: wrap;

AAbanico

BBotica

CComedor

ZZorro

Valores para propiedad 'flex: 'values';

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

'flex: 0 0 20px;' [0] Item flex no crecerá más allá de su (ancho o alto) inicial; [0] no se encogerá si no hay suficiente espacio; [20px] y tendrá un valor inicial (ancho o alto según 'flex-direction') de 20px.
flex: 1 0; [1] Item flex ocupará TODA el área disponible (según sea el 'flex-direction') pero al mismo tiempo [0] NO se encogerá si NO hay espacio disponible.
flex: 20px; [20px] Item tendrá una dimensión inicial (antes de encogerse o apretarse) de 20px; pero no crecerá y se encogerá proporcionalmente a los demás elementos del contenedor si no hay suficiente espacio disponible (de ancho o alto, según el 'flex-direction' dado.


Ejemplos con propiedad 'flex-wrap: nowrap;'

AAbanico

BBotica

CComedor

ZZorro

AAbanico

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

AAbanico

BBotica

CComedor

ZZorro


Propiedad 'flex-flow: 'valor'

Posibles casos de uso son:

'flex-flow: column wrap;' Eje columna -dimensión de altura- y ajusta a nueva línea en caso de no haber espacio suficiente.
'flex-flow: row nowrap;' Eje fila -dimensión de ancho- y elementos no crean nueva línea en caso de carecer de espacio.
'flex-flow: row-reverse nowrap;' Elementos invertidos según eje, y no habrá ajuste a nueva línea en caso de haber poco espacio.

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

'flex-direction:'... row [default], 'row-reverse', 'column', 'column-reverse'.

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

'flex-wrap:'... nowrap [default], 'wrap', 'column', 'wrap-reverse'.


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:


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.

justify-content: flex-start

Holi
Holi

justify-content: flex-end

Holi
Holi

justify-content: center

Holi
Holi

justify-content: space-between

Holi
Holi

justify-content: space-around

Holi
Holi


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


Ejemplo con 'justify-content: flex-end;' (ampliar más el navegador para revisar el resultado)

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


Ejemplo con 'justify-content: center;'

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


Y qué si deseo ajustar el ESPACIO ENTRE ITEMS?

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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro

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:...'

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

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

AAbanico

BBotica

CComedor

ZZorro



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

AAbanico

BBotica

CComedor

ZZorro

AAbanico

BBotica

CComedor

ZZorro



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

AAbanico

BBotica

CComedor

ZZorro



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

AAbanico

BBotica

CComedor

ZZorro



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

AAbanico

BBotica

CComedor

ZZorro



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

AAbanico

BBotica

CComedor

ZZorro

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

TITULO 1 opyq

SUBTITULO opyq

TITULO 2 opyq

SUBTITULO0000000 opyq

X opyq

SUBTITULO opyq

X opyq

SUBTITULO opyq

X opyq

SUBTITULO opyq

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.

TITULO 1 opyq

SUBTITULO opyq

TITULO 2 opyq

SUBTITULO0000000 opyq

X opyq

SUBTITULO opyq




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

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

Son muy similares excepto por lo siguiente:

VALORES DE 'align-content:...'


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.

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


Ejemplo con 'align-content: center;'

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

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.

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


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

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro

AAbanico

BBotica

CComedor

ZZorro

BBotica

CComedor

ZZorro


duduromeroa.com

Propiedades de items flex (Marz. 14-2023)

Propiedades 'order: 'value';

UNO

DOS

TRES

CUATRO



Propiedad 'flex-grow: 'value';

UNO

DOS

TRES

CUATRO

ITEM UNO: crecerá 3 veces en relación a los otros y siempre que exista espacio para crecer.

DOS

TRES

CUATRO: flex-grow: 0;



Propiedad 'flex-shrink: 'value';

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

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

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':

UNO

DOS

TRES

CUATRO

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

UNO

DOS

TRES

CUATRO



Propiedad 'flex-basis: 'value';

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.

UNO

DOS

TRES

CUATRO

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.

UNO

DOS

TRES

CUATRO

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];'

UNO

DOS

TRES

CUATRO

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



Propiedad 'align-self: 'value';

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

..stretch; [default]

...flex-start;

...flex-end;

...center;

...baseline;



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

Nuevo ejempplo:

Uno

Dos

Tres

Cuatro



¿Qué sucede cuando dentro del contenedor flex los items contienen otros items anidados?

Revisemos el comportamiento de la propiedad flex cuando uno o más items contienen otros items. Aquí, solo el contenedor celeste contiene:

item1

item2
item3
item3

item1

item2
item3
item3

item1

item2
item3
item3

En otro ejemplo, al cambiar a 'flex-direction: column':

item1

item2
item3
item3

item1

item2
item3
item3

item1

item2
item3
item3

La complejidad radica cuando debemos activar 'display: flex;' en un SUBcontenedor anidado (cuadro con línea amarilla) dentro del contenedor padre (el item 1 es un elemento <p> que contiene márgenes arriba y abajo por default). En otras palabras, solo agregando la propiedad display: flex; a cada contenedor podemos controlar el comportamiento de los items flex

item1

item2
item3
item3

item1

item2
item3
item3

item1

item2
item3
item3