En pantallas grandes quiero todos los elementos en 1 fila, en pantallas más pequeñas quiero tres filas. Básicamente, no quiero ver el botón solo con H1 en la misma fila. ¿Cómo puede flexbox resolver este problema? gracias :)
<div class="buttoncontainer"> <button class="change">Change background</button> <h1 id="currentcolor">currentcolor</h1> <button class="change">Change background</button> </div>Y CSS:
'''
.buttoncontainer { display: flex; flex-wrap: wrap; height: 90vh; justify-content: flex-start; } button { border: 10px solid black; font-size: xx-large; text-shadow: #222; box-shadow: 10vh; margin: auto; text-align: center; line-height: 4.5; height: 25%; flex-wrap: wrap; border-radius: 20px; } h1 { border: 10px solid black; margin: auto; }Así que no quiero esto: Malo
Pero directo a este BUENO
Entonces, la forma más fácil de resolver este problema sería a través de Media Queries. Las consultas de medios hacen que pueda establecer fácilmente un ancho máximo o mínimo para que las cosas sucedan de cierta manera.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Por lo que entiendo, puede configurarlo para que siempre que sea inferior a una resolución determinada (en este caso configuré 900 px), la propiedad de dirección flexible debe configurarse en 'columna'.
@media (max-width: 900px) { .buttoncontainer { flex-direction: column; } }Esto debería solucionar tu problema.