Taller > CSS
Justify-content en CSS
Esta propiedad nos permite controlar cómo los elementos hijos se distribuyen dentro del contenedor padre.
Valores
Esta propiedad tiene varios posibles valores:
flex-start: los elementos se alinean al comienzo del contenedor.
flex-end: los elementos se alinean al final del contenedor.
center: los elementos se centran dentro del contenedor.
space-between: los elementos se distribuyen de manera equitativa entre el comienzo y el final del contenedor, con espacio igual entre ellos.
space-around: los elementos se distribuyen de manera equitativa entre el comienzo y el final del contenedor, con espacio igual alrededor de cada elemento.
Ejemplo de uso
Por ejemplo, el siguiente código centraría horizontalmente los elementos dentro del contenedor:
.container {
display: flex;
justify-content: center;
}
En este ejemplo, todos los elementos dentro del contenedor con clase “container” se alinearán en el centro del contenedor.
Más ejemplos:
Aquí te presento algunos ejemplos de cómo se verían los diferentes valores de la propiedad justify-content en un contenedor flex:
flex-start (valor predeterminado):
.container {
display: flex;
justify-content: flex-start;
/* valor predeterminado */
}
flex-end:
.container {
display: flex;
justify-content: flex-end;
}
center:
.container {
display: flex;
justify-content: center;
}
space-between:
.container {
display: flex;
justify-content: space-between;
}
space-around:
.container {
display: flex;
justify-content: space-around;
}
Ten en cuenta que estos ejemplos son solo una muestra de cómo se ven los diferentes valores de justify-content, y que la apariencia final dependerá de otros estilos que se apliquen al contenedor y a los elementos hijos.
Align-items en CSS
Esta propiedad nos permite controlar cómo los elementos hijos se distribuyen dentro del contenedor padre en el eje transversal.
Valores
Los valores posibles son:
flex-start: los elementos se alinean al comienzo del contenedor, es decir, arriba.
flex-end: los elementos se alinean al final del contenedor, es decir, abajo.
center: los elementos se alinean en el centro del contenedor.
baseline: los elementos se alinean según la línea base.
stretch (valor predeterminado): los elementos se estiran para llenar el contenedor.
Ejemplo de uso
.container {
display: flex;
align-items: center;
}
En este ejemplo, todos los elementos dentro del contenedor con clase «container» se alinearán en el centro del contenedor en el eje transversal.
En resumen, mientras la propiedad justify-content se utiliza para alinear los elementos en el eje principal, la propiedad align-items se utiliza para alinear los elementos en el eje transversal.
Es importante tener en cuenta que ambas propiedades son complementarias y trabajan de manera conjunta para lograr la distribución deseada de los elementos hijos dentro del contenedor padre.
Más ejemplos:
Aquí te presento algunos ejemplos de cómo se verían los diferentes valores de la propiedad align-items en un contenedor flex:
flex-start:
.container {
display: flex;
align-items: flex-start;
}
flex-end:
.container {
display: flex;
align-items: flex-end;
}
center:
.container {
display: flex;
align-items: center;
}
baseline:
.container {
display: flex;
align-items: baseline;
}
stretch (valor predeterminado):
.container {
display: flex;
align-items: stretch;
}
Ten en cuenta que estos ejemplos son solo una muestra de cómo se ven los diferentes valores de align-items, y que la apariencia final dependerá de otros estilos que se apliquen al contenedor y a los elementos hijos.
Además, es importante mencionar que baseline solo tendrá efecto si los elementos hijos tienen contenido de texto y se debe tener en cuenta el tamaño de la letra y si esta tiene o no decoración (subrayado, tachado, etc.)
Align-self en CSS
Esta propiedad se aplica a elementos hijos individuales y nos permite sobrescribir el valor establecido en la propiedad align-items del contenedor padre.
Valores
Los valores posibles son los mismos que align-items:
flex-start: el elemento se alinea al comienzo del contenedor, es decir, arriba.
flex-end: el elemento se alinea al final del contenedor, es decir, abajo.
center: el elemento se alinea en el centro del contenedor.
baseline: el elemento se alinea según la línea base del texto.
stretch: el elemento se estira para llenar el contenedor.
Ejemplo de uso
.container {
display: flex;
align-items: center;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: flex-end;
}
En este ejemplo, el contenedor tiene la propiedad align-items establecida en “center” y los elementos con clase “item1” y “item2” tienen la propiedad align-self establecida en “flex-start” y “flex-end” respectivamente.
Por lo tanto, el elemento con clase “item1” se alineará en la parte superior del contenedor y el elemento con clase “item2” se alineará en la parte inferior del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
En resumen, align-self es una propiedad muy útil para alinear individualmente los elementos hijos dentro de un contenedor flex, permitiendo un control más granular sobre la distribución de los elementos hijos dentro del contenedor padre.
Ejemplos:
Aquí te presento una lista de ejemplos de cómo se verían los diferentes valores de la propiedad align-self en un contenedor flex utilizando HTML:
align-self: flex-start;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: flex-start;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “flex-start”, lo que hace que este elemento sea alineado en la parte superior del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
align-self: flex-end;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: flex-end;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
div>
</body>
</html>
En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “flex-end”, lo que hace que este elemento sea alineado en la parte inferior del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
align-self: center;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: center;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “center”, lo que hace que este elemento sea alineado en el centro del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
Esto es útil cuando quieres tener un elemento específico alineado de forma diferente a los demás elementos hijos del contenedor flex.
align-self: baseline;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: baseline;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “baseline”, lo que hace que este elemento sea alineado con la línea de base del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
align-self: stretch;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: stretch;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “stretch”, lo que hace que este elemento se estire para llenar todo el alto del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
Con estos ejemplos puedes ver cómo cada uno de estos valores afecta el alineamiento de un elemento dentro de un contenedor flex y cómo puedes utilizar esta propiedad para adaptar el diseño de tu página web.
Align-content en CSS
Valores
Los valores disponibles para align-content son similares a los de align-items, como:
flex-start: Alinea los elementos en la parte superior del contenedor.
flex-end: Alinea los elementos en la parte inferior del contenedor.
center: Alinea los elementos al centro del contenedor.
space-between: Distribuye los elementos de manera equitativa entre la parte superior y la parte inferior del contenedor, dejando espacio entre ellos.
space-around: Distribuye los elementos de manera equitativa en todo el contenedor, dejando espacio entre ellos y alrededor de ellos.
stretch: Estira los elementos para llenar todo el alto del contenedor.
Es importante mencionar que align-content solo tiene efecto cuando el contenedor tiene múltiples líneas de elementos flex, es decir, cuando el atributo flex-wrap está habilitado.
Ejemplo de uso
Aquí te presento una lista de ejemplos de cómo se verían los diferentes valores de la propiedad align-content en un contenedor flex utilizando HTML:
align-content: flex-start;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en flex-start */
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
En este ejemplo, se establece el contenedor como flex y se establece el align-content en flex-start, esto hace que los elementos se alineen en la parte superior del contenedor.
align-content: flex-end;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en flex-end */
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
En este ejemplo, se establece el contenedor como flex y se establece el align-content en flex-end, esto hace que los elementos se alineen en la parte inferior del contenedor.
align-content: center;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en center */
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
En este ejemplo, se establece el contenedor como flex y se establece el align-content en center, esto hace que las líneas de elementos flex dentro del contenedor se alineen al centro del mismo.
Es importante tener en cuenta que el elemento contenedor debe tener múltiples líneas de elementos flex para que el efecto de esta propiedad sea visible, es decir que el atributo flex-wrap debe estar habilitado.
align-content: space-between;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en space-between */
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
En este ejemplo, se establece el contenedor como flex y se establece el align-content en space-between, esto hace que los elementos se distribuyan de manera equitativa entre la parte superior y la parte inferior del contenedor, dejando espacio entre ellos.
align-content: space-around;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en space-around */
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
En este ejemplo, se establece el contenedor como flex y se establece el align-content en space-around, esto hace que los elementos se distribuyan de manera equitativa en todo el contenedor, dejando espacio entre ellos y alrededor de ellos.
align-content: stretch;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en stretch */
.container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
En este ejemplo, se establece el contenedor como flex y se establece el align-content en stretch, esto hace que los elementos se estiren para llenar todo el alto del contenedor.
Con estos ejemplos puedes ver cómo cada uno de estos valores afecta el alineamiento de varias líneas de elementos flex en un contenedor flex y cómo puedes utilizar esta propiedad para adaptar el diseño de tu página web y lograr el alineamiento deseado en el eje transversal del contenedor flex.
Es importante tener en cuenta que la propiedad align-content solo tiene efecto cuando el contenedor tiene múltiples líneas de elementos flex, es decir, cuando el atributo flex-wrap está habilitado.
