我需要修复包含两个项的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。
最佳答案
代码中缺少两件事可以使布局工作:
一。在容器上设置宽度
因为您的容器没有定义的宽度,所以它将获取其内容的宽度。这样地:
这就是你的问题所在。
如图所示,文本不换行是因为它不需要-容器上没有宽度限制,因此它可以扩展以容纳更长的内容。
将此添加到代码中:
.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 */
}
现在你有了这个:
.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