Autodefensa | Consejos CSS

CSS justify-self La propiedad alinea un solo elemento, anulando el de su contenedor principal. justify-items valor.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  justify-items: center; /* overrides this value */
}

.item:nth-child(1) {
  justify-self: start;
}

.item:nth-child(2) {
  justify-self: center;
}

.item:nth-child(3) {
  justify-self: end;
}

.item:nth-child(4) {
  justify-self: stretch;
}

A pesar de justify-self Trabajando a lo largo del eje en línea, su comportamiento exacto depende del contexto con el que estemos tratando. se puede aplicar llegar proyecto de red Y, recientemente, diseño de bloque también posicionamiento absoluto elemento.

Aunque hay otros tipos display diseño (por ej. flex y table), este justify-self Las propiedades solo se aplican a grid, blockasí como el diseño absolutamente posicionado que mencionamos.

este justify-self Las propiedades se definen en Módulo de alineación de cajas CSS Nivel 3 Especificación.

sintaxis

justify-self: 	auto | <overflow-position>? ( normal | <self-position> | left | right ) | stretch | <baseline-position>

<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
<baseline-position> = ( first | last )? && baseline

• Valor inicial: auto
• Se aplica a: Cuadros a nivel de bloque, cuadros absolutamente posicionados y elementos de cuadrícula
• Genética: No
• porcentaje: no aplicable
• Valor calculado: palabra clave especificada
• Orden canónico: por gramo
• Tipo de animación: discreto

valores

/* Initial Values */
justify-self: auto;
justify-self: normal;

/* <self-position> */
justify-self: center;
justify-self: start;
justify-self: end;

justify-self: left;
justify-self: right;

justify-self: self-start;
justify-self: self-end;

justify-self: flex-start; /* Same as start */
justify-self: flex-end; /* Same as end */

/* stretch */
justify-self: stretch;

/* <baseline-position> */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/* Anchor Positioning */
justify-self: anchor-center;

/* <overflow-position> */
justify-self: safe center;
justify-self: unsafe end;

/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: revert;
justify-self: revert-layer;
justify-self: unset;

auto (por defecto)

Si el elemento no tiene padre o está absolutamente posicionado, auto Estará preestablecido en normal. De lo contrario, toma el valor definido por su padre. justify-items propiedad.

start, center y end

y align-selfpodemos colocar un elemento a lo largo del eje en línea de su contenedor alineado usando start, center y end. a pesar de center Permanece igual independientemente del modo de escritura, start y end Depende del modo de escritura del contenedor alineado.

Por ejemplo, de izquierda a derecha (ltr)recipiente, start Coloque los elementos a la izquierda, mientras que de derecha a izquierda (rtl) Está a la derecha.

a pesar de flex-start y flex-end es un valor válido porque justify-self No aplicable a artículos flexibles, funcionan igual que start y endrespectivamente.

self-start y self-end

desde start y end Dependiendo del modo de escritura del contenedor alineado, podemos usar en su lugar self-start y self-end Respetar el patrón de escritura propio del elemento.

left y right

Si queremos colocar un elemento en uno de los dos lados, independientemente del modo de escritura, podemos usar left y right valores. Alinean elementos en sus respectivos lados.

stretch

y stretchel ancho del elemento aumenta para intentar llenar el contenedor alineado respetando las propiedades de tamaño asociadas, p. min-width, max-width o width.

baseline, first baseline y last baseline

En el diseño de maquetación, base es una línea imaginaria en la que se encuentran la mayoría de los caracteres de una línea de texto. Estas filas pueden variar de un elemento a otro, dependiendo de su font-family, font-size o font-weight.

usar baseline-Valores relacionados, podemos alinear elementos por su línea base. Sin embargo, la línea base se extiende a lo largo del eje en línea, por lo que normalmente las alineamos verticalmente a lo largo del eje del bloque. Por ejemplo, en inglés, la línea base se extiende horizontalmente, por lo que la movemos hacia arriba o hacia abajo para alinearla.

desde justify-self Alinee los elementos a lo largo del eje en línea, pero alinee la línea base a lo largo del eje del bloque, baseline La mayoría de las veces el valor no da el resultado esperado justify-* característica.

Para elementos de cuadrícula, las líneas base funcionan de dos maneras:

• baseline o first baseline Alinee los bordes izquierdos de los elementos para que estén lo más juntos posible start Todo lo posible.
• last baseline Alinee los bordes izquierdos de los elementos para que estén lo más juntos posible end Todo lo posible.

En el diseño de bloques, ambos baseline El valor parece estar preestablecido en start. Para elementos absolutamente posicionados, por defecto son safe start y safe endrespectivamente.

Solo funciona si hay varios elementos con ese tipo de alineación de línea base. de lo contrario, baseline/first baseline Recurrir a safe starty last baseline llegar safe end

anchor-center

En el caso de elementos absolutamente posicionados Punto de anclaje predeterminadoeste anchor-center Ajustemos este elemento para que coincida con el centro de su punto de anclaje.

safe y unsafe

Si el contenedor de alineación es demasiado pequeño o el elemento es demasiado grande, el elemento puede desbordarse fuera del contenedor de alineación. Si el contenedor es desplazable, esto no es un gran problema ya que podemos desplazarnos para ver el resto del elemento. Pero para ciertos tipos de alineación (principalmente center y end), el elemento puede desbordarse fuera del área desplazable, lo que provocará la pérdida de datos.

En estos casos podemos establecer safe Primero, en caso de desbordamiento, el proyecto se comporta de la siguiente manera start. En cambio, podemos establecer unsafe Por lo que siempre sigue la alineación definida.

normal

Como todo, lo normal depende de las circunstancias. y para justify-selfdependiendo del tipo de elemento, si está absolutamente posicionado y la configuración de diseño de su elemento principal.

Por “tipo de elemento” me refiero a si el elemento pertenece a alguna de las siguientes categorías:

• bloque/en línea. elemento de bloque (<div>, <p>, <section>etc.) intenta ocupar todo el ancho disponible, mientras que los elementos en línea (<a>, <span>, <b>etc.) sólo ocupa el espacio necesario. Esta distinción es útil para la alineación en diseños de bloques.
• Reemplazado/no reemplazado. Los elementos reemplazados son aquellos cuyo contenido ha sido reemplazado por una fuente externa, p.e. <iframe>, <img> o <video> (Aquí está la lista exacta.). Los elementos no sustituidos son el resto, p. <li>, <div> o <section>ETC.

Nos preocupamos por los elementos reemplazados porque tienen tamaños inherentes que afectan su alineación. Esto significa que, en la práctica, tener elementos definidos aspect-ratio o dimensiones definidas actúan como elementos de sustitución.

junto con normal valor:

• Elementos absolutamente posicionados Depende del tipo de elemento: el recambio tiene un normal valor startmientras que el comportamiento no reemplazado es stretch.
• para Elementos en el diseño de bloques., normal Coloque elementos de acuerdo con las reglas preestablecidas del diseño del bloque. Por lo tanto, los elementos de bloque seguirán creciendo hasta ocupar el ancho disponible, mientras que los elementos en línea no.
• elementos en el contenedor de cuadrícula También depende del tipo de elemento. Si se reemplaza el elemento, funciona como start. De lo contrario, se comporta de la siguiente manera stretch.

Como regla general, los elementos intentarán stretch a menos que sean inline elementos o tener un tamaño definido que lo bloquee, en cuyo caso permanecerán dentro start.

Usar con cuadrícula CSS

Dentro de un diseño de cuadrícula, justify-self Alinear un elemento a lo largo de su eje en línea área de cuadrículaque consta de cualquier número de Unidad de rejilla y se puede definir en muchas maneras.

En la siguiente demostración, colocamos cuatro elementos de la cuadrícula individualmente en un área de la cuadrícula. Por defecto, sus valores son stretch Entonces cubren toda el área de la cuadrícula, pero podemos moverlos usando ambos justify- y align- característica.

Usar con diseño de bloque

Para fines de alineación, los elementos en un diseño de bloque se pueden block elemento o inline elementos, incluyendo inline-block Elementos también. La principal diferencia entre ellos es que los elementos del bloque se pueden alinear dentro del bloque que los contiene, mientras que los elementos en línea se ignoran. justify-self.

Al momento de escribir este artículo, la alineación en diseños de bloques es algo relativamente nuevo y se limita a la alineación en ejes en línea. Es decir, sólo podemos mover elementos del bloque dentro del espacio que normalmente ocupan. Dado que el elemento de bloque crece para llenar el ancho disponible, desde una lente de alineación podemos decir que el elemento de bloque tiene normal valor stretch

Una cosa que notarás es que ambos baseline y last baseline Parece que por defecto starten lugar de alinear el elemento con su borde izquierdo (al inicio o al final) como elementos de cuadrícula.

Uso con posicionamiento absoluto

Finalmente podemos usar ambos. justify-self y align-self En elementos absolutamente posicionados, es decir, alinear elementos a lo largo del eje en línea y el eje del bloque respectivamente.

Su comportamiento exacto puede ser un poco poco intuitivo, ya que aplicar cualquier propiedad a elementos absolutos ordinarios no funcionará:

/* Doesn't work */
.element {
  position: absolute;
  align-self: center;
  justify-self: center;
}

Esto se debe a que, para elementos absolutamente posicionados, justify-self y align-self Alinear elementos con elementos dentro de ellos Insertar bloque contenedor modificado (IMCB).

Por defecto, el IMCB tiene el mismo tamaño que el artículo, por lo que esto significa justify-self y align-self No hay lugar para ningún alineamiento. Para resolver este problema, podemos establecer inset llegar 0 De esta manera, el tamaño del IMCB es el mismo que el tamaño del bloque que contiene el elemento.

El bloque contenedor tiene un nuevo ancestro más cercano. contexto de apilamiento. Por defecto, bloque contenedor inicial Tiene las mismas dimensiones que la ventana gráfica y cubre el comienzo de la página.

/* Works */
.element {
  inset: 0;
  position: absolute;
  align-self: center;
  justify-self: center;
}

Además, si el elemento absolutamente posicionado tiene un punto de anclaje adjunto, podemos usar anchor-center El valor lo alinea con el centro del punto de anclaje.

Especificación

este justify-self Las propiedades se definen en Módulo de alineación de cajas CSS Nivel 3 Especificación, actualmente en borrador editorial.

Soporte del navegador

Uso en CSS Flexbox:

Uso en CSS Grid:

Uso en posicionamiento absoluto puede ser Buday termina en Caniuse. Al momento de escribir este artículo, básicamente funciona en todas partes excepto en Safari, pero es compatible con la Vista previa técnica de Safari, por lo que es posible que pronto obtenga soporte completo.

Más información

Guías relacionadas

Importante