Elemento padre (contenedor)
Como se mencionó en el capítulo anterior, este es un contenedor flexible (el área azul) con tres elementos flexibles:
El contenedor flexible se vuelve flexible al establecer la propiedad display: flex;.
Ejemplo:
.flex-container {
display: flex;
}
Las propiedades del contenedor flexible son:
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
La propiedad flex-direction
La propiedad flex-direction define en qué dirección el contenedor quiere apilar los elementos flexibles.
Ejemplo:
El valor column apila los elementos flexibles verticalmente (de arriba a abajo):
.flex-container {
display: flex;
flex-direction: column;
}
Ejemplo:
El valor colum-reverse apila los elementos flexibles verticalmente (de abajo hacia arriba):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Ejemplo:
El valor row apila los elementos flexibles horizontalmente (de izquierda a derecha):
.flex-container {
display: flex;
flex-direction: row;
}
Ejemplo:
El valor row-reverse apila los elementos flexibles horizontalmente (derecha a izquierda):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
La propiedad flex-wrap
La propiedad flex-wrap especifica si los elementos flexibles deben ajustarse o no.
Los siguientes ejemplos tienen 12 elementos flexibles para demostrar mejor la propiedad flex-wrap.
Ejemplo:
El valor wrap especifica que los elementos flexibles se ajustarán si es necesario:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ejemplo:
El valor nowrap especifica que los elementos flexibles no se ajustarán (este es el valor predeterminado):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Ejemplo:
El valor wrap-reverse especifica que los elementos flexibles se ajustarán si es necesario, en orden inverso:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
La propiedad flex-flow
La propiedad flex-flow es una propiedad abreviada para configurar las propiedades flex-direction y flex-wrap.
Ejemplo:
.flex-container {
display: flex;
flex-flow: row wrap;
}
La propiedad justify-content
La propiedad justify-content se utiliza para alinear los elementos flexibles:
Ejemplo:
El valor center alinea los elementos flexibles en el centro del contenedor:
.flex-container {
display: flex;
justify-content: center;
}
Ejemplo:
El valor flex-start alinea los elementos flexibles al inicio del contenedor (este valor es predeterminado):
.flex-container {
display: flex;
justify-content: flex-start;
}
Ejemplo:
El valor flex-end alinea los elementos flexibles al final del contenedor:
.flex-container {
display: flex;
justify-content: flex-end;
}
Ejemplo:
El valor space-around muestra los elementos flexibles con espacio antes, entre y después de las líneas:
.flex-container {
display: flex;
justify-content: space-around;
}
Ejemplo:
El valor space-between muestra los elementos flexibles con espacio entre líneas:
.flex-container {
display: flex;
justify-content: space-between;
}
La propiedad align-items
La propiedad align-items se utiliza para alinear los elementos flexibles.
En estos ejemplos utilizamos un contenedor de 200 píxeles de alto para demostrar mejor la propiedad align-items.
Ejemplo:
El valor center alinea los elementos flexibles en el medio del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Ejemplo:
El valor flex-start alinea los elementos flexibles en la parte superior del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Ejemplo:
El valor flex-end alinea los elementos flexibles en el fondo del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Ejemplo:
El valor stretch estira los elementos flexibles para llenar el contenedor (este valor es predeterminado):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Ejemplo:
El valor baseline alinea los elementos flexibles, como se alinean sus líneas base:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Nota: El ejemplo utiliza diferentes tamaños de fuente para demostrar que los elementos se alinean según la línea base del texto:
La propiedad align-content
La propiedad align-content se utiliza para alinear las líneas flexibles.
En estos ejemplos, utilizamos un contenedor de 600 píxeles de alto, con la propiedad flex-wrap configurada para ajustar, para demostrar mejor la propiedad align-content.
Ejemplo:
El valor space-between muestra las líneas flexibles con el mismo espacio entre ellas:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Ejemplo:
El valor space-around muestra las líneas flexibles con espacio antes, entre y después de ellas:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Ejemplo:
El valor stretch estira las líneas flexibles para ocupar el espacio restante (este valor es predeterminado):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Ejemplo:
El valor center muestra las líneas flexibles en el medio del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Ejemplo:
El valor flex-start muestra las líneas flexibles al inicio del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Ejemplo:
El valor flex-end muestra las líneas flexibles al final del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Centrado perfecto
En el siguiente ejemplo resolveremos un problema de estilo muy común: el centrado perfecto.
Solución: Establezca las propiedades
justify-contentyalign-itemscon el valorcentery el elemento flexible quedará perfectamente centrado:
Ejemplo:
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Las propiedades del contenedor CSS Flexbox
La siguiente tabla enumera todas las propiedades del contenedor CSS Flexbox:
| Propiedad | Descripción |
align-content | Modifica el comportamiento de la propiedad flex-wrap. Es similar a la propiedad align-items, pero en lugar de alinear elementos flexibles, alinea líneas flexibles. |
align-items | Alinea verticalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje transversal. |
display | Especifica el tipo de cuadro utilizado para un elemento HTML. |
flex-direction | Especifica la dirección de los elementos flexibles dentro de un contenedor flexible. |
flex-flow | Una propiedad abreviada para flex-direction y flex-wrap. |
flex-wrap | Especifica si los elementos flexibles deben ajustarse o no, si no hay suficiente espacio para ellos en una línea flexible. |
justify-content | Alinea horizontalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje principal. |
Traducido con 💚 desde W3Schools.com