html - justify-content：向元素添加宽度后，空格之间不起作用

Question

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

我尝试用 and 替换width，flex-basis但这max-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>

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

标签： htmlcssflexbox

Answer 1

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

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

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