0
192
Views¿Cómo me desplazo horizontalmente en la vista receptiva?
Como puede ver en la imagen, las tarjetas están ordenadas una tras otra. Pero quiero que se desplace hacia los lados en lugar de ordenarlo uno debajo del otro.
¿Cómo puedo resolverlo?
html
<div className="home__container only-mobile"> <div className="home__content"> <h3>{t('home.for_me')}</h3> <div> {campaignData ? campaignData.map((campaign, i) => { return ( <DiscountPolicyCard campaignList={campaign} key={'campaignMobile' + i.toString()} /> ); }) : null} </div> </div> </div>CSS
.home__container.only-mobile { display: grid; place-content: center; .home__content { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 180px; h3 { color: gray; } &>div { justify-content: center; align-items: center; } } }
·
Juan Pablo Isaza
1 answers
Answer question0
.container { display: flex; flex-wrap: no-wrap; gap: 1rem; max-width: 100%; overflow: auto; } .inner { background: lime; min-width: 200px; height: 100px; } <div class="container"> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> </div> Retire la flex-wrap: wrap; le dice al navegador que envuelva elementos dentro de un flexbox si no hay suficiente espacio y eso es básicamente lo contrario de lo que está tratando de lograr. Si no funciona inmediatamente después de eliminar, agregue flex-wrap: no-wrap; en su lugar, agregue un min-width a los contenedores para asegurarse de que no se aplasten.
Ese es el primer paso después de eso, hacer que el contenedor tenga max-width: 100% y overflow: auto , eso debería ser todo.
·
Juan Pablo Isaza
Report
Answer question