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:
.flex-container{
display: flex;
}
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” 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.
.flex-container{
display: flex;
flex-direction: column;
}
Apila los elementos verticalmente de abajo hacia arriba.
.flex-container{
display: flex;
flex-direction: column-reverse;
}
Apila los elementos horizontalmente de izquierda a derecha.
.flex-container{
display: flex;
flex-direction: row;
}
Apila los elementos horizontalmente de derecha a izquierda.
.flex-container{
display: flex;
flex-direction: row-reverse;
}
Especifica si los elementos que posee el contenedor deben ajustarse o no al contenedor.
los elementos del contenedor se ajustarán si es necesario.
.flex-container{
display: flex;
flex-wrap: wrap;
}
los elementos del contenedor se ajustarán en orden inverso.
.flex-container{
display: flex;
flex-wrap: wrap-reverse;
}
Los elementos del contenedor no se ajustaran, es una propiedad por defecto.
.flex-container{
display: flex;
flex-wrap: nowrap;
}
Es un atributo abreviado para configurar los atributos "flex-direction" y "flex-wrap" en una sola línea.
.flex-container{
display: flex;
flex-flow: wrap row-reverse;
}.flex-container{
display: flex;
flex-flow: row wrap;
}
Se utiliza para alinear los elementos flexibles.
Alinea los elementos en el centro del contenedor.
.flex-container{
display: flex;
justify-content: center;
}
Alinea los elementos al comienzo del contenedor.
.flex-container{
display: flex;
justify-content: flex-start;
}
Alinea los elementos al final del contenedor.
.flex-container{
display: flex;
justify-content: flex-end;
}
Muestra los elementos con espacio antes,entre y después de ellos.
.flex-container{
display: flex;
justify-content: space-around;
}
Muestra los elementos con espacio entre ellos.
.flex-container{
display: flex;
justify-content: space-between;
}
Se utiliza para alinear los elementos dentro del contenedor.
Alinea los elementos en el medio del contenedor.
.flex-container{
display: flex;
align-items: center;
height: 500px;
background-color: rgb(42, 42, 42)
}
Alinea los elementos en la parte superior del contenedor.
.flex-container{
display: flex;
align-items: flex-start;
height: 500px;
background-color: rgb(42, 42, 42)
}
Alinea los elementos en la parte inferior del contenedor.
.flex-container{
display: flex;
align-items: flex-end;
height: 500px;
background-color: rgb(42, 42, 42)
}
Estira los elementos para llenar el contenedor, es la configuración por defecto de un elemento.
.flex-container{
display: flex;
align-items: stretch;
height: 200px;
background-color: rgb(42, 42, 42)
}
Alinea los elementos buscando una línea base.
.flex-container{
display: flex;
align-items: baseline;
height: 200px;
background-color: rgb(42, 42, 42)
}
Es un 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.
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 400px;
background-color: rgb(42, 42, 42)
}
Muestra los elementos en la parte inferior del contenedor.
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: flex-end;
height: 400px;
background-color: rgb(42, 42, 42)
}
Muestra los elementos en el medio del contenedor.
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: center;
height: 400px;
background-color: rgb(42, 42, 42)
}
Ubica los elementos distribuidos en el contenedor.
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 400px;
background-color: rgb(42, 42, 42)
}
Muestra los elementos con los mismos espacios entre ellos de forma equitativa.
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: space-around;
height: 400px;
background-color: rgb(42, 42, 42)
}
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)
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 400px;
background-color: rgb(42, 42, 42)
}
Si te interesa profundizar más 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.
👌👌👌