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

【问题标题】：justify-content: space-between not working after adding width to an elementjustify-content：向元素添加宽度后，空格之间不起作用
【发布时间】：2019-06-11 16:16:41
【问题描述】：

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

我尝试将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>

我希望content 在添加宽度属性后仍位于弹性框的左侧。然而，尽管容器上有justify-content: space between;，它还是会移向弹性框的中心。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您在content 元素之前有a 元素，并且当您设置宽度时，该元素还会影响product 中由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>

【讨论】：

谢谢，这有帮助！

【解决方案2】：

我已经使用 flex 简化了布局，并且还尝试使用管理布局，

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>

【讨论】：