Flexbox nos permite generar de una manera más eficiente alineación y distribución de espacios entre elementos en un contenedor, considerando incluso cuando desconocemos el tamaño o qué tanta flexibilidad se necesitará.
Trabaja en una sola dirección, es decir, se mueven en filas o columnas.
Con esto, vamos a poder alterar su ancho, altura y orden para llenar los espacios disponibles.
Un contenedor flex permitirá expandir sus elementos para adaptarse al espacio disponible o reducirse para evitar salidas del contenedor.
Esta propiedad define un contenedor flex.
Los valores son: inline o block
Ejemplo:
.container {
display: flex;
}Se establece el eje en el cual los elementos se ordenarán.
Los valores de esta propiedad son:
- Izquierda a derecha:
row - Derecha a izquierda:
row-reverse - Arriba a abajo:
column - Abajo a arriba:
column-reverse
Ejemplo:
.container{
display: flex;
flex-direction: column;
}Los elementos dentro de su contenedor flex tratarán de integrarse en una sola línea. En caso de que el espacio no sea suficiente, abarcarán otra fila debajo de la actual para poder situarse.
Las propiedades son:
nowrapwrapwrap-reverse
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse
}Atajo para utilizar flex-direction u flex-wrap al simultáneo.
La sintaxis para ejecutar esta propiedad sería:
flex-flow: <flex-direction> <flex-wrap>
.container{
display: flex;
flex-flow: column
}Esta propiedad define la alineación del eje x. Distribuye en un espacio específico los diferentes elementos, hasta que llega a un punto máximo o límite.
Los valores principales que puedes aplicar a esta propiedad son:
flex-start- Alinea todos los elementos al inicio del contenedor.flex-end- Alinea todos los elementos al final del contenedor.center- Centra todos los elementos del contenedor.space-between- Se distribuyen todos los elementos en el espacio, comenzando y cerrando en los extremos.space-around- Se distribuyen todos los elementos en el espacio, con una separación de los extremos, partiendo del centro.space-evenly- Se distribuyen todos los elementos en el espacio, con una separación del centro, partiendo de los extremos.
.container{
display: flex;
justify-content: `center`
}Esta propiedad define el comportamiento de acuerdo a como cada elemento "flex" se ordena a lo largo del eje x.
Es una versión similar al justify-content para el eje x.
.container{
align-items: stretch
}Esta propiedad alinea las líneas de un contenedor flex cuando un espacio adicional en el eje x, similar a como justify-content alinea los elementos individuales.
.container{
align-content: flex-start
}Esta propiedad, asigna un valor de ordenamiento a un elemento específico dentro del contenedor de flexbox.
.item{
order: 1
}Como te comente en semanas pasadas, nuestro cuerpo es muy importante y para ello te dejo unos ejercicios que puedes hacer mientras estudias, presiona aquí
Es un sistema de rejilla bidimensional.
Durante muchos años, CSS utilizó tablas, luego floats, posiciones e inline-block, sin embargo, todo era más un conjunto de técnicas más que un sistema que nos permitiera crear web de manera más organizada.
La propuesta CSS Grid es la propuesta más sólida para resolver el problema de lienzos dentro de los sitios web.
A pesar de tener una perspectiva diferente a Flexbox, ambas pueden complementarse y utilizarse sin complicación.
Define el elemento como un contenedor de rejilla.
Establece el contexto para poder manipular sus contenidos.
Los valores que se manejan son:
grid. Genera una rejilla en bloque.inline-grid. Genera un rejilla en línea.
.container {
display: grid
}Define las columnas y filas de una rejilla, manteniendo espacios separados en su listado de valores.
Los valores representan el tamaño y el espacio entre ellos representa la línea de rejilla
.container {
display: grid;
grid-template-columns: 50px 100px 10px auto
}Es una propiedad que especifica el número y la altura de las filas en un lienzo de rejilla.
Los valores son un lista que se separa por espacios, donde cada valor especifica la altura de cada fila.
.grid-container {
display: grid;
grid-template-rows: 100px 300px;
}Se especifican espacios dentro del lienzo de la rejilla.
- Nombras los elementos utilizando
grid-area. - Se realiza una referencia a través de
grid-template-areas.
.element{
grid-area: ejemplo;
}
.grid-container {
display: grid;
grid-template-areas: "ejemplo ejemplo"
}Es una propiedad que define el tamaño del espacio entre las columnas, dentro del lienzo de la rejilla.
.grid-container {
grid-column-gap: 50px
}Es una propiedad que define el tamaño del espacio entre las filas, dentro del lienzo de la rejilla.
.grid-container {
grid-row-gap: 50px
}Es una propiedad que establece el espacio entre filas y columnas.
.grid-container {
grid-grap: 50px;
}
