Quiere decir diseño de caja flexible. Se refiere a un modelo unidimensional que permite el control de ingeniar proyectos complejos. Es decir, que permite una amplia manipulación de los ejes manejando el layout en una sola dimensión a la vez, ya sea fila o columna, con ayuda del grid layout (también de CSS) donde se determinara por medio de regla de tres los tamaños en px o % correspondientes a cada columna establecida (cajas por línea) de acuerdo al tamaño establecido para el display.

Para entender flexbox se debe tomar en cuenta que en este modelo conoceremos al elemento padre como Flex container el cual adquiere dos ejes: main axis, que sería el eje principal x y el cross axis, eje secundario y. Al eje principal le corresponde el main size: medida del punto principal (main start) al punto final (main end). Siendo el eje secundario correspondiente al cross siza: distancia del punto de inicio (cross start) y el punto final (cross end). Al elemento hijo lo nombraremos Flex ítem.

Su comportamiento aparente es similar al display: inline-block; en la misma línea. La clase que le corresponde .d-flex es la que vuelve mi elemento en bloque en un flex container y a sus hijos en ítems. (display: flex)

Básicos de Flexbox

Surgen los ejes: DETERMINAN LA DIRECCIÓN en la que se renderiza, yendo uno tras otro sobre la misma línea siguiendo el eje y el ancho de los ítem se determina siempre por el contenido (main axis). Por default sobre cross axis siempre intentarán ocupar el 100% del eje.

• Se pueden cambiar la dirección de los ejes:
  .f-direc f-direc-R { flex-direction: row; – significa que siga una dirección en línea (x).
  f-direc-C { flex-direction: column; – significa que siga una dirección y.

Flexbox/Width-height

El tamaño se determina por el que se le coloca en lugar del determinado por default. Cuando el contenido ítem llega a medir en total una distancia mayor a la establecida este lo ignorará y le dará prioridad a la medida establecida para el contenido principal. Siendo main size siempre el de mayor prioridad por css.

FlexDirection
• flex-direction: row-reverse: Invierte el flujo de los elementos (ítem) a raíz de que este atributo intercambia el punto de inicio main start con el punto final main end, respetando la posición sobre el eje de main size. Orden distinto. De izquierda a derecha de derecha izquierda.
• flex-direction: column: Igual que el anterior invierte el flujo de los elementos. En lugar de ir de arriba hacia abajo surge de abajo hacia arriba.

Fuentes: 21 Diciembre 2019

MDN web docs. Conceptos Básicos de flexbox. Recuperado de: https://mzl.la/2vgRg1U
W3schools. CSS Flexbox (Flexible Box). Recuperado de: https://www.w3schools.com/css/css3_flexbox.asp
CSS Tricks. A Complete Guide to Flexbox. Recuperado de: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Imagen recuperada de: https://miro.medium.com