La propiedad de justificarse se usa para especificar la alineación de la posición de un contenido junto con el eje apropiado en una cuadrícula CSS.
Sintaxis:
justificarse a sí mismo: estirar | normales | automóvil | línea de base | empezar | fin | centro | arranque flexible | extremo flexible | auto-inicio | fin propio | izquierda | derecha | seguro | inseguro
Valores de propiedad:
- stretch: Es el valor por defecto de esta propiedad y hace que el contenido ocupe todo el ancho de la celda.
- normal: son las propiedades triviales, es decir, se comporta como inicio en diseños a nivel de bloque y en cuadros de posición absoluta reemplazados, como estiramiento en otros cuadros de posición absoluta, en los diseños de tabla y flexible, se ignora, en el diseño de cuadrícula como estiramiento excepto en pocos casos como cajas con relación de aspecto donde actúa como el valor de inicio .
- auto: Es el valor utilizado en la propiedad de justificar elementos ubicados en el elemento principal o por defecto en el valor normal . Es el valor predeterminado.
- línea base : Realiza la alineación de la línea base de alineación del primer o último conjunto de línea base de la caja actual con la línea base correspondiente en el primer o último conjunto de línea base compartido de todas las cajas en su grupo de línea base compartida. El valor de reserva para la primera línea base es el inicio y para la última línea base es el final.
- start : Permite que el contenido se alinee a la izquierda de la celda.
- end: Permite que el contenido se alinee a la derecha de la celda.
- center : Permite que el contenido se alinee con el centro de la celda.
- flex-start: Es lo mismo que el valor de inicio .
- flex-end: Es lo mismo que el valor final .
- autoinicio: Alinea el elemento a la izquierda del contenedor alineado al principio de un elemento.
- self-end: Alinea el ítem a la derecha del contenedor alineado al final de un ítem.
- izquierda: hace que el paquete de artículos quede alineado a la izquierda del contenedor de alineación. Actúa como start si el eje de la propiedad no es paralelo al eje en línea.
- right: hace que el paquete de elementos quede alineado a la derecha del contenedor de alineación. Actúa como end si el eje de la propiedad no es paralelo al eje en línea.
- seguro: hace que el elemento se alinee como el valor inicial si el elemento desborda el contenedor de alineación.
- inseguro: hace que el elemento se alinee con el valor dado, independientemente de la alineación de los tamaños relativos del contenedor y el elemento.
Ejemplo 1: en este ejemplo, no se usa la autojustificación para la alineación.
HTML
<!DOCTYPE html> <html> <head> <style> article { font-family: sans-serif; background-color: green; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 70px; grid-gap: 30px; width: 700px; justify-items: stretch; border: solid; margin: 20%; } article span { background-color: white; color: green; margin: 2px; text-align: center; border: solid; } article, span { padding: 5px; border-radius: 3px; border: solid; } </style> </head> <body> <article class="container"> <span>GEEKS</span> <span>FOR</span> <span>GEEKS</span> <span>ONLINE</span> <span>PORTAL</span> </article> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, algunos de los valores de autojustificación se utilizan para la alineación.
HTML
<!DOCTYPE html> <html> <head> <style> article { font-family: sans-serif; background-color: green; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 70px; grid-gap: 30px; width: 700px; justify-items: stretch; border: solid; margin: 20%; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: white; color: green; margin: 2px; text-align: center; border: solid; } article, span { padding: 5px; border-radius: 3px; border: solid; } </style> </head> <body> <article class="container"> <span>GEEKS</span> <span>FOR</span> <span>GEEKS</span> <span>ONLINE</span> <span>PORTAL</span> </article> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome
- Firefox
- Ópera
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por dikshapatro y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA