Comprender los conceptos básicos del atributo align-items
En este paso, aprenderás los conceptos fundamentales de la propiedad align-items en Flexbox, que es crucial para controlar la alineación vertical de los elementos flexibles dentro de un contenedor flexible.
La propiedad align-items define cómo se alinean los elementos flexibles a lo largo del eje transversal (verticalmente en un diseño de fila, horizontalmente en un diseño de columna). Por defecto, los elementos flexibles se estiran para llenar el eje transversal del contenedor.
Vamos a crear un ejemplo simple de HTML y CSS para demostrar el uso básico de align-items:
<!doctype html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
border: 2px solid blue;
}
.flex-item {
width: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
En este ejemplo, hemos creado un contenedor flexible con tres elementos flexibles. Por defecto, la propiedad align-items se establece en stretch, lo que significa que los elementos se estirarán para llenar la altura del contenedor.
Los principales valores de align-items son:
stretch (por defecto): Los elementos se estiran para llenar el contenedorflex-start: Los elementos se alinean al principio del eje transversalflex-end: Los elementos se alinean al final del eje transversalcenter: Los elementos se centran a lo largo del eje transversalbaseline: Los elementos se alinean según su línea base de texto
Salida de ejemplo de la alineación stretch por defecto:
[Item 1][Item 2][Item 3]
------ ------ ------
(full (full (full
height) height) height)
Abra el WebIDE y cree un nuevo archivo llamado flexbox-align.html en el directorio ~/project. Copie el código HTML anterior en este archivo y guárdelo. Luego puede abrir el archivo en un navegador web para ver la alineación predeterminada en acción.
