如何用display: flex
来模拟display: box
?看起来box
被抛弃了,但是我需要内联渲染元素。flex
将使用自己的规则row
或column
覆盖布局,因此flex
容器中的标签不会被内联呈现。
编辑:我所做的是为一个页面写一个用户脚本。我不想修改我插入的元素的父元素。否则我必须自己适应每一个父元素为display: flex
的页面。
EDIT2:我不想更改text nodes<a href></a>text nodes
的结构
#container {
display: flex;
width: 100px;
}
#box {
display: -webkit-box;
width: 100px;
}
#a {
display: inline-flex;
}
#tag {
display: flex;
}
`display: flex`
<p id="container">
<span id="tag">[TAG]</span> Hello world and <a id="a" href="/">StackOverflow</a>! Show me the money
</p>
Expected: `display: -webkit-box`
<p id="box">
<span id="tag">[TAG]</span> Hello world and <a id="a" href="/">StackOverflow</a>! Show me the money
</p>
`display: block` is fine. But it will failed when tag display as flex(`inline-flex` is fine)
<p id="container" style="display: block">
<span id="tag">[TAG]</span> Hello world and <a id="a" href="/">StackOverflow</a>! Show me the money
</p>
3条答案
按热度按时间cngwdvgl1#
您可以简单地为消息指定一个宽度。
lkaoscv72#
添加另一个伸缩框并设置
flex-direction: column;
。bprjcwpo3#
你可以用CSS网格来实现: