在 flex 模型中,带有换行符的长文本元素会切断行中的前一个元素。但如果文本元素没有长文本,一切都很好。 我做错了什么?
.franchisePlaceAverage {
width: 450px;
border: 4px solid #93d5ab;
}
.franchisePlaceAverage .row {
display: flex;
width: 100%;
align-items:center;
margin: 20px 0
}
.franchisePlaceAverage .star{
width: 20px;
height: 19px;
margin: 10px 28px;
background: tomato;
}
.franchisePlaceAverage .text {
}
<div class="franchisePlaceAverage">
<div class="row">
<div class="star"></div>
<div class="text">Some long text here Some long text here Some long text here Some long text here </div>
</div>
<div class="row">
<div class="star"></div>
<div class="text">Some short text here </div>
</div>
</div>
最佳答案
Flexbox 试图将所有内容放入其中,因此减少了第一项 (.star
) 的大小。您可以通过使用 flex-shrink:0;
或在元素上强制设置最小宽度来防止这种情况。
.franchisePlaceAverage {
width: 450px;
border: 4px solid #93d5ab;
}
.franchisePlaceAverage .row {
display: flex;
width: 100%;
align-items:center;
margin: 20px 0
}
.franchisePlaceAverage .star{
width: 20px;
flex-shrink:0;/* don't shrink me */
/* min-width: 20px; would also work */
height: 19px;
margin: 10px 28px;
background: tomato;
}
.franchisePlaceAverage .text {
}
<div class="franchisePlaceAverage">
<div class="row">
<div class="star"></div>
<div class="text">Some long text here Some long text here Some long text here Some long text here </div>
</div>
<div class="row">
<div class="star"></div>
<div class="text">Some short text here </div>
</div>
</div>
关于html - 在带有换行符的 flex 模型元素中切断前一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54556790/