Guía básica
Flexbox CSS
"Hasta el infinito... ¡y más allá!"
¡Hola y bienvenid@s!
Mi nombre es José J. Peleato Pradel.
¿Qué es Flexbox layout?
En el pasado, en CSS se ha utilizado diferentes técnicas de trabajo en la ubicación de los elementos de una página, desde el posicionamiento (static, relative, fixed, abolute, etc), elementos en línea o en bloque (inline, inline-block, block) o los ultra conocidos y actualmente semi odiados: float.
Un sistema de creación de diseño difícil de adaptar a los objetivos y metas que nos exigen a nivel profesional hoy en día.
Desarrollos de aplicaciones de escritorio, dispositivos móviles, infinitas resoluciones, etc, necesitan de un paso más allá.
En los años 2000, el acceso a Internet a través de los dispositivos móviles tuvo un crecimiento exponencial y motivo en la comunidad el tener que trabajar con sistemas de diseños adaptables por la creciente variedad de resoluciones.
Pero, no es hasta partir de los años 2010, donde el uso de populares frameworks Web/JavaScript, como Bootstrap, inspiraron el comienzo de las especificaciones CSS Flex-box y Grid layout.
La propiedad CSS flex-box layout es un modelo de diseño web de CSS 3 actualmente en estado Candidate recommendation (CR) por el consorcio W3C en las especificaciones CSS.
Permite definir los elementos de una página para que se comporten de forma predecible cuando el diseño de la página se adapta a diferentes resoluciones.
Compatibilidad actual semi-total:
El concepto de Flexbox
Los elementos pueden ubicarse en cualquier dirección y pueden tener dimensiones flexibles para adaptarse al espacio visible.
Posicionar los elementos en diseños complejos puede hacerse de una forma sencilla, clara y con un código más limpio, ya que el orden de visualización es independiente al orden que estos tengan en el DOM.
El algoritmo del modelo de diseño de "Flex" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "block", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "inline", que asume una disposición horizontal.
Terminología de Flexbox
Diagrama
Flex container
Elemento padre que contiene todos los flex items. Usando la propiedad display el contenedor se puede definir como flex o inline-flex
.container { display: flex; }
.inline-container { display: inline-flex; }inline-flex no hace que los flex items se muestren en linea. Hace que flex container se visualice en linea. No hay ninguna diferencia en el efecto sobre los flex items.
Flex item
Cualquier elemento hijo en el interior del flex container se considera un flex item.
Cualquier texto dentro del elemento contenedor se envuelve automáticamente en un flex item anónimo.
Axes
Cada diseño de flexbox sigue dos ejes:
- Main axis: Eje principal que tiene una orientación específica. Por defecto, es en horizontal (row).
- Cross axis: Eje secundario siempre perpendicular al eje principal.
Si main axis es en horizontal, cross axis será en vertical, y viceversa.
Flex-direction
Establece el eje principal para que se oriente en horizontal (por defecto) o vertical.
| Propiedad | Valor | Significado |
| flex-direction: | row | row-reverse | column | column-reverse | Cambia la orientación del eje principal. |
Flex-wrap
Los Flex item pueden disponerse en una sola o varias líneas de acuerdo con la propiedad, que controla la dirección del Cross axis y la dirección en la que las nuevas líneas se apilan.
| Propiedad | Valor | Significado |
| flex-wrap: | nowrap | wrap | wrap-reverse | Evita o permite el desbordamiento (multilinea). |
Valores de la propiedad Flex-wrap
| Valor | Descripción |
| nowrap (por defecto) | Establece los ítems en una sola línea (no permite que se desborde el contenedor). |
| wrap | Establece los ítems en modo multilínea (permite que se desborde el contenedor). |
| wrap-reverse | Establece los ítems en modo multilínea, pero en dirección inversa. |
Flex-flow
Atajo (short-hand) que tiene como función resumir los valores de las propiedades flex-direction y flex-wrap
.container {
display: flex;
/* flex-flow: [flex-direction] [flex-wrap] */
flex-flow: row wrap;
}Justify-content
Tiene como función colocar los ítems de un contenedor mediante una disposición concreta a lo largo del eje principal.
| Propiedad | Valor | Actúa sobre |
| justify-content: | flex-start | flex-end | center | space-between | space-around | Eje principal |
Valores de la propiedad Justify-content
| Valor | Descripción |
| flex-start (por defecto) | Agrupa los ítems al principio del eje principal. |
| flex-end | Agrupa los ítems al final del eje principal. |
| center | Agrupa los ítems al centro del eje principal. |
| space-between | Distribuye los ítems dejando (el mismo) espacio entre ellos. |
| space-around | Distribuye los ítems dejando (el mismo) espacio a ambos lados de cada uno de ellos. |
Align-items
Determina el valor predeterminado de cómo se colocan los Flex items en el eje transversal en cada línea.
Align-content
La propiedad CSS align-content ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.
Align-self
La propiedad CSS align-self alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de align-items. Si el límite transversal de alguno de los elementos está definido como auto, el valor de align-self es ignorado.
Flexbox Froggy
Un juego para aprender
¡FIN!
Simplemente, GRACIAS
