Propiedad CSS justify-items
La propiedad justify-items define el justify-self predeterminado para todos los cuadros secundarios, dándoles a todos una forma predeterminada de justificar cada cuadro a lo largo del eje correspondiente. A diferencia de justify-self, que se aplica a elementos individuales, justify-items se aplica a todo el contenedor.
La propiedad justify-items se usa principalmente con diseños Grid, pero también se aplica a:
- elementos posicionados absolutamente
- contenedores grid
Nota:
justify-itemsafecta principalmente a los contenedores grid y a los elementos posicionados absolutamente. En diseños flexbox, esta propiedad se ignora.
| Valor inicial | auto |
|---|---|
| Se aplica a | Contenedores grid y elementos posicionados absolutamente. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.justifyItems = "start"; |
Sintaxis
Valores de CSS justify-items
css
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;Ejemplo: justify-items con el valor "start"
Ejemplo de código CSS justify-items
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: start;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Resultado
Ejemplo: justify-items con el valor "center"
Ejemplo de CSS justify-items center
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: center;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Ejemplo: justify-items con el valor "first-baseline"
Ejemplo de la propiedad justify-items con el valor "first-baseline":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: grid;
padding-top: 10px;
height: 250px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
background: #ccc;
justify-items: first-baseline;
}
.item {
width: 50%;
height: 50%;
text-align: center;
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: green;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>Ejemplo: justify-items con el valor "self-end"
Ejemplo de la propiedad justify-items con el valor "self-end":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: self-end;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| auto | Si el cuadro no tiene padre, o está posicionado absolutamente, el valor auto representa normal. |
| normal | El efecto depende del modo de diseño: <br>• Diseños de bloque: Se comporta como start. <br>• Diseños posicionados absolutamente: Se comporta como start para elementos reemplazados y como stretch para los demás. <br>• Celdas de tabla: Se ignora. <br>• Flexbox: Se ignora. <br>• Diseños Grid: Se comporta como stretch, excepto en elementos con relación de aspecto o tamaño intrínseco, donde se comporta como start. |
| start | Todos los elementos se posicionan entre sí en el borde inicial (izquierdo) del contenedor. |
| end | Todos los elementos se posicionan entre sí en el borde final (derecho) del contenedor. |
| flex-start | Los elementos se colocan al principio del contenedor. |
| flex-end | Los elementos se colocan al final del contenedor. |
| self-start | Se permite que el elemento se coloque en el borde del contenedor según su propio lado inicial. |
| self-end | Se permite que el elemento se coloque en el borde del contenedor según su propio lado final. |
| center | Los elementos se posicionan uno junto a otro hacia el centro del contenedor. |
| left | Los elementos se colocan uno junto a otro hacia el lado izquierdo del contenedor. Si el eje de la propiedad no es paralelo al eje en línea, este valor se comporta como end. |
| right | Los elementos se colocan uno junto a otro hacia el lado derecho del contenedor. Si el eje de la propiedad no es paralelo al eje en línea, este valor se comporta como start. |
| baseline | Alinea todos los elementos dentro de un grupo haciendo coincidir sus líneas base de alineación. |
| first-baseline | Alinea todos los elementos dentro de un grupo haciendo coincidir sus primeras líneas base de alineación. |
| last-baseline | Alinea todos los elementos dentro de un grupo haciendo coincidir sus últimas líneas base de alineación. |
| stretch | Estira el elemento para ajustarlo al contenedor a lo largo del eje en línea/principal. |
| safe | Si el tamaño del elemento desborda el contenedor de alineación, el elemento se alinea como si el modo de alineación fuera start. |
| unsafe | Independientemente del tamaño del elemento y del contenedor de alineación, se respeta el valor de alineación. |
| legacy | Palabra clave heredada para compatibilidad con versiones anteriores. Se asigna a flex-start, flex-end o center según el modo de diseño. No afecta a la herencia. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad del elemento padre. |
Práctica
What does the CSS 'justify-items' property do?