Question

0

227

Views

How to align flex items in react?

I am trying create a Single Page Application which compares broadband deals and want to align align flex box items like this image. For some reason the items are not centered and not properly aligned the way I want it to. Btw this is a code snippet of my JSX code, so the main code is just a container which maps the items retrieved from an api.

But i keep getting this image

Here is my code

.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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-09T03:11:41.961Z

first things first you need to warp your price divs in another div so that they're grouped together.Try something like this...

.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>

0

227

How to align flex items in react?

1 answers

0

Find remote jobs

Andres GPT