CODEWITHSUNDEEP
htmlcssflexbox
sohinim98
sohinim98

Reputation: 92

justify-content: space-between not working after adding width to an element

I have a flex-container with two divs that I want on the left and right sides of the container. justify-content: space-between; works fine when I don't set the width of the element. I want one of the elements to have a width of 40%. On adding width: 40%;, it shifts that element towards the center.

I tried replacing width with flex-basis and max-width, but that didn't work.

.product-container {
  background: #ecefef;
}
.product {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.product-image {
  width: calc(60rem/1.6);
}
.product .content {
  font-size: calc(1.6rem/1.1);
  width: 40%;
}
.title-text {
  color: #000041;
  font-size: calc(3rem/1.5);
  font-family: circular-bold, sans-serif;
  margin: 50px 0;
}
<div class="product-container">
      <div class="product">
        <a name="lorem"></a>
        <div class="content">
          <div class="title-text">Lorem Ipsum</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
        <div>
            <img class="product-image" src="https://lorem.com" alt="lorem">
        </div>
      </div>
    </div>

I expect content to be on the left side of the flexbox even after adding a width property. However, it shifts towards the center of the flexbox despite having justify-content: space between; on the container.

Upvotes: 0

Views: 3203

Answers (2)

Akshay Bawane
Akshay Bawane

Reputation: 146

I have simplified the layout using flex, and also tried to manage layout using,

flex-basis: 40%;


.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: flex-start;
}

.left {
    text-align: center;
    order: 0;
    flex-basis: 40%;
    align-self: auto;
    height: 100px;
    background-color: aqua;
}

.right {
    text-align: center;
    order: 0;
    flex-basis: 60%;
    align-self: auto;
    height: 100px;
    background-color: rgb(0, 153, 255);
}
<div class="flex-container">
    <div class="left">
        <h3>left</h3>
    </div>
    <div class="right">
        <h3>right</h3>
    </div>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

You have a element before the content element and when you set a width that element also affects positioning of elements in product set by space-between and content is 2nd element so it is positioned in the center.

One solution is to remove a element if you don't need it and other one is to use margin-right: auto on content element.

.product-container {
  background: #ecefef;
}

.product {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.product-image {
  width: calc(60rem/1.6);
}

.product .content {
  font-size: calc(1.6rem/1.1);
  width: 40%;
  margin-right: auto;
}

.title-text {
  color: #000041;
  font-size: calc(3rem/1.5);
  font-family: circular-bold, sans-serif;
  margin: 50px 0;
}
<div class="product-container">
  <div class="product">
    <a name="lorem"></a>
    <div class="content">
      <div class="title-text">Lorem Ipsum</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div>
      <img class="product-image" src="https://lorem.com" alt="lorem">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions