我需要修复包含两个项的flex容器的位置:一个黄色圆圈和一些文本。
当我向p元素添加更多文本时,黄色圆圈会向左移动。但我需要圆圈保持它的位置。文本元素不应该展开;它应该换行。

.flex {
  display: flex;
  align-items: center;
  position: absolute;
  right: 14%;
  top: 15%;
}
.flex .item {
  position: relative;
  width: 5rem;
  height: 5rem;
  background: yellow;
  border-radius: 50%;
}
.flex .item span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  transform: translate(-50%, -50%);
}
.flex p {
  margin-left: 10px;
}

<div class="flex">
  <div class="item">
    <span>9</span>
  </div>
  <p>Text here</p>
</div>

这里有一个codepen

最佳答案

代码中缺少两件事可以使布局工作:
一。在容器上设置宽度
因为您的容器没有定义的宽度,所以它将获取其内容的宽度。这样地:
html - 伸缩元素中的文本必须换行,而不要移动同级并扩展容器-LMLPHP
这就是你的问题所在。
如图所示,文本不换行是因为它不需要-容器上没有宽度限制,因此它可以扩展以容纳更长的内容。
将此添加到代码中:

.flex { width: 150px; }

现在你有了这个:
html - 伸缩元素中的文本必须换行,而不要移动同级并扩展容器-LMLPHP
2。禁用flex-shrink
An initial setting of a flex container is flex-shrink: 1。这意味着flex项将收缩以适合容器内部(防止溢出)。
您可以在上图中的黄色圆圈上看到flex-shrink的结果。
您需要禁用flex-shrink。将此添加到代码中:
.flex .item {
  position: relative;
  /* width: 5rem;        <-- remove this; not necessary */
  height: 5rem;
  background: yellow;
  border-radius: 50%;
  flex: 0 0 5rem; /* flex-grow:0 (don't grow), flex-shrink:0 (don't shrink), width:5rem */
}

现在你有了这个:
html - 伸缩元素中的文本必须换行,而不要移动同级并扩展容器-LMLPHP
.flex {
  display: flex;
  align-items: center;
  position: absolute;
  right: 14%;
  top: 15%;
  width: 150px;
  border: 1px dashed black;
}
.flex .item {
  position: relative;
  /* width: 5rem; */
  height: 5rem;
  background: yellow;
  border-radius: 50%;
  flex: 0 0 5rem; /* NEW */
}
.flex .item span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  transform: translate(-50%, -50%);
}
.flex p {
  margin-left: 10px;
}

<div class="flex">
  <div class="item">
    <span>9</span>
  </div>
  <p>text here text here text here text here </p>
</div>

revised codepen

09-18 01:11
查看更多