div - La diferencia entre justify-self, justify-items y justify-content en CSS Grid
justify content style (4)
Estoy realmente confundido. Al buscar recursos y documentación en línea, la mayoría de la documentación de estas propiedades parece hacer referencia a Flex-box, no a la cuadrícula. Y no sé cuán aplicable es a la cuadrícula la documentación para las propiedades equivalentes en Flex-box.
Entonces, intenté hacer referencia a https://css-tricks.com/snippets/css/complete-guide-grid/ , que los define de la siguiente manera:
justify-items : alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila
justify-content : esta propiedad alinea la cuadrícula a lo largo del eje de la fila
justify-self : alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila
Pero todavía no entiendo cuál es la diferencia entre ellos. Entonces, tengo 3 preguntas que quiero aclarar.
-
¿La propiedad
justify-itemsen Flex-box es la misma que la propiedadjustify-itemsen Grid? o son diferentes de alguna manera? (En otras palabras, ¿puedo reutilizar la documentación de Flex-box para Grid) - ¿Qué hacen (justifican) el contenido, el yo y los artículos?
- ¿En qué se diferencian (justificar) el contenido, el yo y los elementos?
Cualquier aclaración sería muy apreciada.
Editar: Dado que todos me siguen dando recursos de Flex-box, estoy preguntando sobre css-grid, NO flex-box.
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 un solo elemento. Para alinear elementos a lo largo del eje principal en línea en flexbox, utilice 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.
Es bueno saberlo:
Para obtener más información y ejemplos, le sugiero que consulte:
- MDN
- https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
- https://www.smashingmagazine.com/2017/12/grid-inspector/
Y para un poco de inspiración:
OK, creo que lo descubrí gracias a Michael_B. Mi confusión vino del hecho de que a veces propiedades diferentes al azar no cambiarían nada sobre el diseño de la cuadrícula.
justify-content le permite colocar la cuadrícula dentro de su contenedor de cuadrícula. Es por eso que la propiedad justify-content no tendrá efecto si el contenedor de cuadrícula es del mismo tamaño que la cuadrícula. (Que siempre es el caso si usa unidades fr). Esta es también la razón por la que puede tener los valores: espacio alrededor, espacio entre y espacio de manera uniforme (además de inicio, final, centro y estiramiento), que dividirán la cuadrícula y colocarán los elementos de la cuadrícula dentro del contenedor de la cuadrícula. Esta es una propiedad del contenedor de cuadrícula .
justify-items le permite establecer una posición predeterminada para el contenido colocado en los elementos de la cuadrícula de la cuadrícula (un elemento de cuadrícula es un cuadro en la cuadrícula, como se define en la publicación de Michael_B). Esta es una propiedad del contenedor de cuadrícula .
justify-self le permite anular la posición predeterminada del contenido en una celda individual. Esto anulará la posición establecida por justify-items. Por lo tanto, si usa justify-self en todos los elementos secundarios del contenedor, la configuración de justify-items en el contenedor de la cuadrícula no tendrá ningún efecto. Esta es una propiedad del contenido dentro de un elemento de cuadrícula .
Nota: Si convierte un elemento de cuadrícula en una cuadrícula en sí misma (en otras palabras, el contenido dentro de un elemento de cuadrícula es una cuadrícula), entonces puede colocarlo dentro del elemento de cuadrícula externo utilizando la propiedad justify-self o justify-content propiedad en el contenedor de cuadrícula de la cuadrícula interna, ya que el contenedor de cuadrícula de la cuadrícula interna es uno de los elementos de la cuadrícula de la cuadrícula externa.
Como es de esperar, todo esto también se aplica a las propiedades align- *.
Por favor corrígeme si tengo algo mal
Diferencias clave
entre
justify-content
,
justify-items
y
justify-self
en CSS Grid:
-
La propiedad
justify-contentcontrola la alineación de las columnas de la cuadrícula. Se establece en el contenedor de la cuadrícula . No se aplica ni controla la alineación de los elementos de la cuadrícula. -
La propiedad
justify-itemscontrola la alineación de los elementos de la cuadrícula. Se establece en el contenedor de la cuadrícula . -
La propiedad justify
justify-selfanulajustify-itemsen elementos individuales. Se establece en elementos de cuadrícula y hereda el valor dejustify-items, de forma predeterminada.
Ejemplo
Aquí hay una cuadrícula de 2x3.
- 2 columnas, cada una de 100 px de ancho
- 3 filas, cada una de 50 px de altura
El contenedor es:
- 500 px de ancho
- 250 px de altura
.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
La propiedad justify
justify-content
alinea las
columnas
dentro del contenedor.
.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 se fija 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 fuera dimensionada con
fr
, entonces todo el espacio libre se consumiría y
justify-content
no tendría efecto.
justify-items
La propiedad justify
justify-items
alinea los
elementos de la cuadrícula
dentro de sus pistas (no todo el contenedor)
.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 se centran dentro de sus columnas.
justify-self
La propiedad justify
justify-self
anula
justify-items
en elementos individuales.
.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 contrapartes
justify-*
, pero en la dirección perpendicular.
Más aquí: ¿Cuál es la diferencia entre align-items vs. align-content en Grid Layout?
Referencia de especificaciones
10.3 Alineación de eje de fila: las propiedades
justify-selfyjustify-itemsLos elementos de la cuadrícula se pueden alinear en la dimensión en línea utilizando la propiedad
justify-selfen el elemento de la cuadrícula o la propiedadjustify-itemsen el contenedor de la cuadrícula.10.4 Alineación de eje de columna: las propiedades
align-selfyalign-itemsLos elementos de cuadrícula también se pueden alinear en la dimensión del bloque (perpendicular a la dimensión en línea) utilizando la propiedad
align-selfen el elemento de la cuadrícula oalign-selfpropiedad de elementos dealign-itemsen el contenedor de la cuadrícula.10.5 Alinear la cuadrícula: las propiedades
justify-contentyalign-contentSi los bordes exteriores de la cuadrícula no se corresponden con los bordes de contenido del contenedor de la cuadrícula (por ejemplo, si no hay columnas de tamaño flexible), las pistas de la cuadrícula se alinean dentro del cuadro de contenido de acuerdo con las propiedades de
justify-contentyalign-contenten la cuadrícula envase.(énfasis añadido)
Módulo de alineación de caja CSS
Tu escribiste:
¿La propiedad
justify-itemsen Flex-box es la misma que la propiedadjustify-itemsen 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 gradualmente las propiedades de alineación para modelos de caja individuales e implementar su nuevo
Módulo de alineación de caja
, que busca para definir un conjunto de propiedades de alineación para usar en todos los modelos de caja.
De la especificación flexbox:
El Módulo de alineación de recuadro CSS amplía y reemplaza las definiciones de las propiedades de alineación (
justify-content,align-items,align-self,align-content) que se presentan aquí.
Hay referencias similares en la especificación de cuadrícula.
Justify-self es para alinear la posición del contenido dentro de su celda horizontalmente .
Mientras align-self es para alinear la posición del contenido dentro de su celda verticalmente .
Aquí está el resultado para alinear los elementos usando
justify-self: start;
