Unidad 13. Posicionamiento. Flexbox. Grid (XXXI)



13.22. Rejilla. Justify-seft y align-seft

Alinear celdas concretas

Estas dos propiedades (justify-items y align-items) que acabamos de ver afectan a todos los elementos de la rejilla, pero podemos aplicar el mismo tipo de alineación a elementos concretos de la rejilla con las propiedades justify-seft y align-seft.

Por ejemplo la rejilla tiene justify-items: stretch; pero la celda 2 tiene justify-seft: start, la 3 tiene justify-self: end, y la cuatro tiene justify-self: center;

celda 1
celda 2
celda 3
celda 4

 

Este otro ejemplo la rejilla tiene align-items: stretch; pero la celda 2 tiene align-self: start, la celda 3 tiene align-self: end, y la celda cuatro align-self: center.

celda 1
celda 2
celda 3
celda 4

Estos tipos de alineación sólo tiene sentido cuando la celda se encuentra dentro de un área más amplia y por lo tanto puede desplazarse en algún eje.

Podemos hacer combinaciones para cada celda con propiedades justify-seft y align-seft, por ejemplo,

 <div  style="align-self: start; justify-self: end;">celda 1</div>
 <div  style="align-self: center; justify-self: end;">celda 2 </div>
 <div  style="align-self: center; justify-self: start;">celda 3</div>
 <div  style="align-self: center; justify-self: center;">celda 4</div>
celda 1
celda 2
celda 3
celda 4

Enero-2019 (V 2.0)
Pág. 13.31
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.