0
238
Visualizações¿Cómo alinear elementos flexibles en reaccionar?
Estoy tratando de crear una aplicación de página única que compare ofertas de banda ancha y quiero alinear elementos de cuadro flexible como esta imagen. Por alguna razón, los elementos no están centrados y no están correctamente alineados como yo quiero. Por cierto, este es un fragmento de código de mi código JSX, por lo que el código principal es solo un contenedor que mapea los elementos recuperados de una API.
Pero sigo recibiendo esta imagen.
Aquí está mi código
.container { display: flex; justify-content: left; align-items: center; } .companyName { display: flex; flex-direction: row; align-items: center; margin: 2rem; padding: 1rem; } .companyInfo { display: flex; flex-direction: column; margin-left: 2rem; float: left; } .price { display: flex; flex-direction: column; align-items: flex-start; border: 5px solid #1C6EA4; } <div className='container'> {/**Company Name */} <div className='companyName'> <img src={deals.provider_logo_image_url} alt='logo' style={{ width: '4%' }}></img> <div className='companyInfo'> <div>{deals.provider_name}</div> <div>{deals.deal_name}</div> </div> </div> {/**Monthly Price */} <div className='price'> <div>Monthly Cost</div> </div> {/**Setups Price */} <div className='price'> <div>Setups Price</div> </div> {/**Remove to compare */} <div className='price'> <div>Remove to compare</div> </div> {/**Continue */} <div className='price'> <div>Continue</div> </div> {/**More */} <div className='price'> <div>More</div> </div> </div>
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Lo primero es lo primero, debe deformar sus divisiones de precios en otra división para que se agrupen. Pruebe algo como esto ...
.container { display: flex; justify-content: left; align-items: center; } .companyName { display: flex; flex-direction: row; align-items: center; margin: 2rem; padding: 1rem; width: 300px; } .companyInfo { display: flex; flex-direction: column; margin-left: 2rem; float: left; } .prices{ flex-grow: 1; display:flex; justify-content: space-evenly; } .price { display: flex; width: 100%; flex-direction: column; align-items: flex-start; border: 5px solid #1C6EA4; } <div class='container'> <div class='companyName'> <img src="test" alt='logo'></img> <div class='companyInfo'> <div>Provider Name</div> <div>Deal Name</div> </div> </div> <div class="prices"> <div class='price'> <div>Monthly Cost</div> </div> <div class='price'> <div>Setups Price</div> </div> <div class='price'> <div>Remove to compare</div> </div> <div class='price'> <div>Continue</div> </div> <div class='price'> <div>More</div> </div> </div> </div> <div class='container'> <div class='companyName'> <img src="test" alt='logo'></img> <div class='companyInfo'> <div>Provider Name</div> <div>Deal Name</div> </div> </div> <div class="prices"> <div class='price'> <div>Monthly Cost</div> </div> <div class='price'> <div>Setups Price</div> </div> <div class='price'> <div>Remove to compare</div> </div> <div class='price'> <div>Continue</div> </div> <div class='price'> <div>More</div> </div> </div> </div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta