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