Saltar al contenido

La diferencia entre justify-self, justify-items y justify-content en CSS Grid

Solución:

Para responder tu pregunta:

1

Como mencionó reiallenramos, “Las propiedades justify-self y justify-items no se implementan en flexbox. Esto se debe a la naturaleza unidimensional de flexbox, y que puede haber múltiples elementos a lo largo del eje, lo que hace imposible justificar una sola item. Para alinear elementos a lo largo del eje principal en línea en flexbox, usa la propiedad justify-content. ” – MDN

2-3

Esta captura de pantalla de W3 hace un excelente trabajo al mostrar lo que hacen y las diferencias entre ellos.
ingrese la descripción de la imagen aquí

Es bueno saberlo:

Para obtener más información y un ejemplo, le sugiero que consulte:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
  • https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
  • https://www.smashingmagazine.com/2017/12/grid-inspector/

Y para inspirarte:

  • https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

Diferencias clave Entre justify-content, justify-items y justify-self en CSS Grid:

  • los justify-content La propiedad controla la alineación de las columnas de la cuadrícula. Está ambientado en el contenedor de rejilla. No se aplica ni controla la alineación de los elementos de la cuadrícula.
  • los justify-items La propiedad controla la alineación de los elementos de la cuadrícula. Está ambientado en el contenedor de rejilla.
  • los justify-self anulaciones de propiedad justify-items en artículos individuales. Está ambientado en elementos de la cuadrícula y hereda el valor de justify-items, por defecto.

Ejemplo

Aquí hay una cuadrícula de 2×3.

  • 2 columnas, cada una de 100 px de ancho
  • 3 filas, cada una de 50 px de alto

El contenedor es:

  • 500px de ancho
  • 250 px de alto

ingrese la descripción de la imagen aquí

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

justify-content

los justify-content la propiedad se alinea columnas dentro del contenedor.

ingrese la descripción de la imagen aquí

.container {
  justify-content: space-between;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

Con justify-content: space-between ambas columnas están fijadas a los bordes. Los elementos de la cuadrícula cambian solo porque existen dentro de esas columnas. De lo contrario, no se ven afectados.

Tenga en cuenta que esta propiedad solo funciona cuando hay espacio libre en el contenedor. Si alguna de las columnas tuviera el tamaño fr, entonces se consumiría todo el espacio libre, y justify-content no tendría ningún efecto.

justify-items

los justify-items la propiedad se alinea elementos de la cuadrícula dentro de sus pistas (no todo el contenedor)

ingrese la descripción de la imagen aquí

.container {
  justify-items: center;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

Con justify-items: center los elementos de la cuadrícula están centrados dentro de sus columnas.

justify-self

los justify-self anulaciones de propiedad justify-items en artículos individuales.

ingrese la descripción de la imagen aquí

.container        { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }


.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}
<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

align-content, align-items y align-self

Estas propiedades hacen lo mismo que sus justify-* contrapartes, pero en la dirección perpendicular.

Más aquí: ¿Cuál es la diferencia entre alinear elementos y alinear contenido en el diseño de cuadrícula?

Referencia de especificaciones

10.3. Alineación del eje de filas: el justify-self y justify-items
propiedades

Elementos de la cuadrícula se puede alinear en la dimensión en línea utilizando el
justify-self propiedad en el elemento de la cuadrícula o justify-items propiedad en el contenedor de rejilla.

10.4. Alineación del eje de columna: el align-self y align-items
propiedades

Elementos de la cuadrícula También se puede alinear en la dimensión del bloque (perpendicular a la dimensión en línea) utilizando el align-self propiedad en el elemento de la cuadrícula o align-items propiedad en el contenedor de rejilla.

10.5. Alinear la cuadrícula: el justify-content y align-content
propiedades

Si la cuadrícula los bordes exteriores no se corresponden con los bordes del contenido del contenedor de la cuadrícula (por ejemplo, si ninguna columna tiene un tamaño flexible), las pistas de la cuadrícula se alinean dentro del cuadro de contenido de acuerdo con el
justify-content y align-content propiedades en el contenedor de la cuadrícula.

(énfasis añadido)

Módulo de alineación de caja CSS

Tu escribiste:

Es el justify-items propiedad en Flex-box lo mismo que el justify-items propiedad en Grid?

Aunque las especificaciones Flex y Grid proporcionan sus propias definiciones para las propiedades de alineación de palabras clave, como justify-items y align-content, el W3C está en proceso de eliminar las propiedades de alineación para modelos de caja individuales e implementar sus nuevas Módulo de alineación de cajas, que busca definir un conjunto de propiedades de alineación para su uso en todos los modelos de caja.

De la especificación de flexbox:

1.2. Interacciones del módulo

El módulo de alineación de cajas CSS amplía y reemplaza las definiciones de las propiedades de alineación (justify-content, align-items,
align-self, align-content) introducido aquí.

Hay referencias similares en la especificación Grid.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Tags : / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *