[英]fit flex item cross-axis size to content
我有一个列方向为 info__text-container 的 flex-container，其宽度为 150px。 在里面我有两个跨度，文本可以换行到下一行。
我想要的是 flex item 在文本换行时缩小到内容，但它始终保持 150px。
单词是动态生成的，所以我不能只使用<br/>或 smth。
我拥有的
我想要的是
body { font-family: sans-serif; } .info { display: flex; align-items: center; } .info__block-margin { margin-right: 48px; } .info__number { font-size: 40px; } .info__number-margin { margin-right: 20px; } .info__text-container { display: flex; flex-direction: column; max-width: 150px; } .info__text { min-width: 0; font-size: 16px; font-weight: bold; line-height: 25px; } .info__subtext { min-width: 0; font-size: 14px; }
<!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"></div> <div class="info info__block-margin"> <p class="info__text-container"> <span class="info__text">Socially SignificantSo </span> <span class="info__subtext">Socially SignificantSocial</span> </p> <span class="info__number">98</span> </div> <script src="src/index.js"></script> </body> </html>
先感谢您。
使用当前的 HTML 结构，您可以将flex-basis: 0为.info__text-container类。 如果您想知道将基础设置为 0 的作用，请参阅此答案。
CSS flex-box，如何让一个item在横轴方向拉伸小于内容？
[英]CSS flex-box, how do I make an item stretch smaller than the content in the cross-axis direction?
Flexbox，当flexbox容器高度设置为auto时，在横轴之间添加空格
[英]Flexbox, add space-between in the cross-axis when flexbox container height is set to auto
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.