CSS flexbox: La propiedad flex en CSS es la combinación de las propiedades flex-grow, flex-shrink y flex-basis. Se utiliza para establecer la longitud de elementos flexibles. La propiedad flexible es mucho más receptiva y compatible con dispositivos móviles. Es fácil colocar elementos secundarios y el contenedor principal. El margen no colapsa con los márgenes del contenido. El orden de cualquier elemento se puede cambiar fácilmente sin editar la sección HTML. El flexbox se agregó a los estándares CSS hace unos años para administrar la distribución del espacio y la alineación de los elementos. Básicamente es una sintaxis de diseño unidimensional.
Alineación vertical al centro: la propiedad flexbox se usa para establecer el contenido en alineación vertical. El contenido del texto se puede alinear verticalmente configurando las siguientes propiedades de visualización:
- alinear elementos
- justificar-contenido
- dirección de flexión
alinear elementos y justificar contenido son las propiedades importantes para centrar absolutamente el texto horizontal y verticalmente. El centrado horizontal se gestiona mediante la propiedad de contenido de justificación y el centrado vertical mediante la propiedad de elementos de alineación.
Ejemplo 1: este ejemplo configura el contenido del texto alineado verticalmente al centro.
<!DOCTYPE html>
<html>
<head>
<title>
Vertically align text content
</title>
<!-- CSS property to vertical align text
content using flex-box -->
<style>
.GFG {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
min-height: 400px;
background-color: green;
align-items: center;
}
</style>
</head>
<body>
<div class="GFG">
<h1>GeeksforGeeks</h1>
<h2>Vertically align text using Flexbox</h2>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra cómo configurar el texto alineado a la izquierda verticalmente en un flexbox usando CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Vertically align text content
</title>
<!-- CSS property to vertical align text
content using flex-box -->
<style>
.GFG {
display: flex;
align-items: left;
justify-content: left;
flex-direction: column;
text-align: left;
margin: 13% 0;
min-height: 300px;
background-color:green;
align-items: left;
}
</style>
</head>
<body>
<div class="GFG">
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
style="display: inline;">
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por apeksharustagi1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA