0
239
Vistas¿Cómo muevo los componentes dentro de mi botón horizontal y verticalmente según el ancho de la pantalla?
Me gustaría mi botón, que contiene 3 componentes (1 en el extremo izquierdo, 2 en el centro y 3 en el extremo derecho (debido a align-center: space between ), que necesito para otra variante), para funcionar así, cuando el tamaño de la pantalla es mayor a 560px:
donde flex-direction: row lo mantiene funcionando como quiero. Luego, quiero cambiarlo ligeramente cuando el ancho de la pantalla cae por debajo de 560px. Me gustaría mover el componente 1 por encima de los componentes 2 y 3 y centrarlo entre ellos (horizontalmente), como se puede ver aquí...
Pude lograr la solución con la imagen cuando coloqué un div alrededor de los componentes 1 y 2 , pero luego no puedo lograr la solución final cuando el ancho de la pantalla es inferior a 560 px. También pude lograr esa solución cuando emparejé los componentes 2 y 3 dentro del mismo div , pero eso hace que la función más amplia tampoco funcione como yo quiero.
Me imagino que hay una manera de lograr lo que quiero sin hacer cumplir estas agrupaciones div , pero no estoy muy seguro. También soy algo nuevo en Javascript, por lo que cualquier consejo sobre algo que he dicho también sería apreciado.
2 Respuestas
Responde la pregunta0
Usé un punto de interrupción para cambiar el conjunto de reglas tanto para el elemento contenedor (botón en su caso) como para los elementos secundarios.
El siguiente ejemplo está en LESS, pero puede ver el CSS compilado en este codepen usando el menú desplegable en el panel CSS.
@mediumQuery: ~"screen and (max-width:560px)"; .container { display : flex; flex-direction: row; column-gap : 20px; border : 2px solid @yellow; padding : 10px; width : 100vw; div { display : inline-block; border : 2px solid @purple; width : 200px; height : 100px; font-size : 40px; line-height : 100px; text-align : center; &:last-child{ margin-left: auto; } } @media @mediumQuery { display : block; flex-direction : unset; column-gap : unset; border : 2px solid @lightBlue; text-align : center; div { margin : 20px; &:first-child { display : block; margin : auto; } } } }0
puede colocar el div que desea que esté en la parte superior en otro contenedor y luego jugar con las consultas de @media y ajustar como desee
main { display: flex; flex-wrap: wrap; max-width: 560px; border: 1px solid; } div { width: 100px; height: 100px; border: 1px solid; } div:nth-child(3) { margin-left: auto; } @media screen and (max-width: 560px) { main { justify-content: space-between; } section { width: 100%; } section div { margin: auto; } } @media screen and (max-width: 240px) { main { flex-direction: column; justify-content: center; align-items: center; } div:nth-child(3) { margin: auto; } } <main> <section> <div>1</div> </section> <div>2</div> <div>3</div> </main>