这是关于弹性盒的。我有一个 150px 宽度的盒子。该框内有一个文本和一个图标。我希望它们向左对齐。
问题是，当需要换行时，项目会均匀分布。
li {
width: 150px;
box-sizing: border-box;
border: 3px solid lightgray;
align-items: center;
justify-content: flex-start;
display: flex;
margin-bottom: 10px;
}
span {
display: inline-block;
outline: 1px solid tomato;
justify-content: flex-start;
}
.svg {
height: 12px;
width: 12px;
display: inline-block;
outline: 1px solid green;
}
svg {
display: block;
}
img {
width: 150px;
}
<ul>
<li>
<span>
<a href="">123456789</a>
</span>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M7 0a.998.998 0 0 1 .74.327l10 11a1 1 0 0 1 0 1.346l-10 11a1 1 0 0 1-1.48-1.346L15.648 12 6.26 1.673A1 1 0 0 1 7 0z"
></path>
</svg>
</div>
</li>
<li>
<span>
<a href="">123456789 123456</a>
</span>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M7 0a.998.998 0 0 1 .74.327l10 11a1 1 0 0 1 0 1.346l-10 11a1 1 0 0 1-1.48-1.346L15.648 12 6.26 1.673A1 1 0 0 1 7 0z"
></path>
</svg>
</div>
</li>
<li>
<span>
<a href="">123456789 12345678</a>
</span>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M7 0a.998.998 0 0 1 .74.327l10 11a1 1 0 0 1 0 1.346l-10 11a1 1 0 0 1-1.48-1.346L15.648 12 6.26 1.673A1 1 0 0 1 7 0z"
></path>
</svg>
</div>
</li>
<div>I want this —this is an image—</div>
<img src="https://i.stack.imgur.com/EBUGw.png" />
</ul>
我想要换行符，但不填充水平空间。有什么办法可以通过这个标记来实现这一点吗？
如果我正确理解您的图像，您希望带有数字的红色框仅采用适合内部数字所需的尺寸。您可以通过执行以下操作来实现：
li {
span {
flex: 0;
}
}
这意味着该元素不会增长以适应空白空间。查看更多关于在这里灵活增长 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
