html - 证明内容 : space-between not working after adding width to an element

Question

我有一个 flex-container，我想要在容器的左侧和右侧放置两个 div。 justify-content: space-between; 在我未设置元素宽度时工作正常。我希望其中一个元素的宽度为 40%。添加 width: 40%; 时，它会将元素移向中心。

我尝试用 flex-basis 和 max-width 替换 width，但没有用。

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

我希望 content 即使在添加了 width 属性后仍位于 flexbox 的左侧。然而，尽管容器上有 justify-content: space between;，它还是向 flexbox 的中心移动。

Answer 1

您在 content 元素之前有一个 a 元素，当您设置宽度时，该元素也会影响 product 中元素的定位 code>space-between 和 content 是第二个元素，因此它位于中心。

一种解决方案是在不需要时删除 a 元素，另一种解决方案是在 content 上使用 margin-right: auto > 元素。

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