CSS: Mover elementos dentro de un contenedor
En los ejemplos anteriores, se utilizó un número bastante pequeño de elementos dentro del contenedor flexible. Imaginemos que hay más elementos y que no caben dentro del contenedor.
En este caso, los elementos se saldrán del contenedor y seguirán colocándose en el eje principal, ya que por defecto el contenedor no mueve los elementos.
En el siguiente ejemplo, el ancho del contenedor está marcado en azul y hay espacio entre los elementos para entender cuándo los elementos se salen del contenedor:
Para determinar cómo se comportarán los elementos cuando no haya suficiente espacio, se utiliza la propiedad flex-wrap, que puede tener uno de los siguientes valores:
nowrap- valor por defecto. Los elementos no se muevenwrap- valor más común. Los elementos se mueven cuando no hay suficiente espacio dentro del contenedorwrap-reverse- los elementos se mueven invirtiendo el orden a lo largo del eje principal. Este orden es útil para crear blogs, ya que las entradas más antiguas se colocarán en la parte inferior
Así es como se colocan los elementos al utilizar estos valores:
nowrap
wrap
wrap-reverse
Tarea
En esta lección, volveremos a la estilización del bloque "Pregunta-Respuesta". Esta vez, los elementos tienen un ancho limitado, por lo que es recomendable moverlos si no hay suficiente espacio.
<style>
.qa {
font: 18px/1.5 sans-serif;
display: flex;
}
.question {
width: 400px;
padding: 20px;
color: #fff;
background: #8ea7e9;
}
.answer {
width: 400px;
padding: 20px;
}
</style>
<div class="qa">
<div class="question">¿Cuáles son los lenguajes de programación más demandados en 2023?</div>
<div class="answer">Los lenguajes más populares para aprender en 2023 siguen siendo Python y JavaScript</div>
</div>
Mejora la funcionalidad del diseño. Puedes probarlo reduciendo el tamaño de la ventana de tu navegador.
¿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.