flex项目中的文本必须换行，而不是移动兄弟和扩展容器

Question

我需要修复包含两个项目的flex容器的位置：黄色圆圈和一些文本。

当我向p元素添加更多文字时，黄色圆圈会向左移动。但我需要圆圈来保持其位置。文本元素不应该扩展;它应该包装。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这里是codepen。

Answer 1

代码中缺少两个可以使布局工作的东西：

<强> 1。在容器上设置宽度

由于您的容器没有定义的宽度，因此它将占用其内容的宽度。像这样：

这就是你遇到的问题。

如图所示，文本没有包装，因为它不需要 - 容器上没有宽度约束，因此它会扩展以容纳更长的内容。

将此添加到您的代码中：

.flex { width: 150px; }

现在你有了这个：

<强> 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 */
}

现在你有了这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

revised codepen