En este artículo, aprenderemos cómo alinear el extremo flexible del elemento al final del contenedor usando CSS. La propiedad align-items and display de CSS se utiliza para alinear elementos al final del contenedor.
Enfoque: la propiedad align-items y display de CSS se utiliza para alinear elementos al final del contenedor. Para alinear elementos al final del contenedor, establecemos el valor de alineación de elementos en flex-end y el valor de visualización en flex.
Sintaxis:
display:flex; align-items: flex-end;
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg {
border: solid 5px red;
width: 50vh;
height: 50vh;
font-size: 50px;
color: rgb(0, 167, 0);
display: flex;
align-items: flex-end;
}
</style>
</head>
<body>
<div class="gfg">
<div>GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Antes de aplicar la propiedad de visualización y alineación de elementos :
Después de aplicar la propiedad de visualización y alineación de elementos :
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA