CSS: Alineación de elementos dentro de un contenedor
Uno de los aspectos más destacados de Flex es la capacidad de alinear contenido en cualquier eje. Ya sea el eje principal o el eje secundario, siempre puedes utilizar varias propiedades para colocar automáticamente los elementos en la página.
En esta lección, vamos a aprender sobre las propiedades justify-content y align-items, que permiten alinear elementos en el eje principal y secundario, respectivamente.
Para analizar cómo funcionan estas propiedades, usaremos el siguiente ejemplo:
El contenedor Flex está resaltado en gris. Todas las propiedades en esta lección se aplicarán a este contenedor
Alineación en el eje principal
Para alinear elementos en el eje principal, se utiliza la propiedad justify-content. Esta propiedad se aplica al contenedor (un bloque con la propiedad display: flex) y puede tener varios valores. Vamos a estudiar los valores más comunes:
flex-start— alinea al principio del eje. Aunque no es el valor por defecto, se ve así como en el ejemplo de arribaflex-end— alinea al final del ejecenter— alinea el contenido en el centro del contenedorspace-between— el primer y último elemento se ajustan al principio y final del eje, mientras que los elementos restantes se distribuyen en el espacio restantespace-around— similar aspace-between, pero el primer y último elemento también tienen márgenes que son la mitad de los márgenes de los demás elementos
flex-start
flex-end
center
space-between
space-around
Alineación en el eje secundario
Además de alinear elementos en el eje principal, Flex también permite alinear elementos en el eje secundario al mismo tiempo. Para comprender este efecto, los ejemplos de esta lección tienen una altura de contenedor mayor de la necesaria.
Para ello, se utiliza la propiedad align-items. Esta propiedad también tiene varios valores, pero vamos a analizar los más comunes:
flex-start— alinea al comienzo del eje secundarioflex-end— alinea al final del eje secundariocenter— alinea en el centro del eje secundario
flex-start
flex-end
center
Como puedes ver, hay menos valores aquí que en la alineación en el eje principal. Recuerda que hay dos ejes: si usas la propiedad flex-direction: column, la alineación visual cambiará y se usará la propiedad justify-content para alineación vertical:
flex-direction: column y justify-content: space-between
Tarea
El cliente quiere que aparezca una flecha en el bloque de "Preguntas y Respuestas" para visualmente relacionar la pregunta y la respuesta. Mejora la funcionalidad del bloque
<style>
.qa {
font: 18px/1.5 sans-serif;
}
.question {
width: 400px;
padding: 20px;
color: #fff;
background: #8ea7e9;
}
.answer {
width: 400px;
padding: 20px;
}
.arrow {
margin: 0 10px;
}
</style>
<div class="qa">
<div class="question">¿Cuáles son los lenguajes de programación más demandados en 2023?</div>
<div class="arrow">→</div>
<div class="answer">Los lenguajes más populares para aprender en 2023 siguen siendo Python y JavaScript</div>
</div>
La flecha se encuentra visualmente en el centro en relación con los bloques de pregunta y respuesta. Utiliza Flex para mejorar el bloque y, utilizando alineación, coloca los bloques en el centro
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.