Técnica de CSS que permite crear diseños flexibles y adaptables a diferentes tamaños de pantalla y dispositivos, con esta técnica es posible controlar el tamaño, la posición y el orden de los elementos que se encuentran en un contenedor, además distribuirlos de manera flexible. Flexbox se basa en el concepto de “Flex Container” (Contenedor flexible) y “Flex item” (Elemento flexible).
Flexbox trabaja con 2 ejes, el eje principal identificado como (flex-direction) y un eje perpendicular (row o row-reverse) a éste.
Al comenzar a implementar flexbox lo primero es contar con un contenedor flexible, tal como se muestra a continuación:
El contenedor identificado con la clase flex-container se vuelve flexible al establecer el atributo “display” con la propiedad “flex”.
 |
El contenedor identificado con la clase flex-container se vuelve flexible al establecer el atributo “display” con la propiedad “flex”. |
|---|
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Define en qué dirección el contenedor muestra los elementos, a este atributo se le pueden aplicar las siguientes propiedades.
Apila los elementos verticalmente de arriba a abajo.
Apila los elementos verticalmente de abajo hacia arriba.
Apila los elementos horizontalmente de izquierda a derecha.
Apila los elementos horizontalmente de derecha a izquierda.
Especifica si los elementos que posee el contenedor deben ajustarse o no.
los elementos del contenedor se ajustarán si es necesario.
los elementos del contenedor se ajustarán en orden inverso.
Los elementos del contenedor no se ajustaran, es una propiedad por defecto.
Es un atributo abreviado para configurar las propiedades de "flex-direction" y "flex-wrap" en una sola linea.
Se utiliza para alinear los elementos flexibles.
Alinea los elementos en el centro del contenedor.
Alinea los elementos al comienzo del contenedor.
Alinea los elementos al final del contenedor.
Muestra los elementos con espacio antes,entre y después de ellos.
Muestra los elementos con espacio entre ellos.
Se utiliza para alinear los elementos dentro del contenedor.
Alinea los elementos en el medio del contenedor.
Alinea los elementos en la parte superior del contenedor.
Alinea los elementos en la parte inferior del contenedor.
Estira los elementos para llenar el contenedor, es la configuración por defecto de un elemento.
Alinea los elementos buscando una línea base.
Atributo que se utiliza para alinear los elementos de un contenedor, para una mejor visualización se suele implementar junto a flex-wrap.
Muestra los elementos desde el comienzo del contenedor.
Muestra los elementos en la parte inferior del contenedor.
Muestra los elementos en el medio del contenedor.
Ubica los elementos distribuidos en el contenedor.
Muestra los elementos con los mismos espacios entre ellos de forma equitativa.
Estira los elementos para ocupar el espacio dentro del contenedor, esto es predeterminado.
Importante: stretch es la configuración por defecto de los contenedores sino se especifica tamaño (height)
Si te interesa profundizar mas en el tema te invito a ingresar a los siguientes link:
- Juega y aprende en flexboxfroggy.
- [https://flexboxfroggy.com/#es]
- Documentación.
- (https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
I.A.S. Ingeniería, Aplicaciones y Software S.A.S.