对于flex div为什么占用其父元素100%的宽度,我感到困惑。请使用以下代码段:
#wrapper {
width: 100%;
height: 100px;
background: green;
}
#flex {
color: white;
display: flex;
flex-direction: row;
background: blue;
}
<div id="wrapper">
<div id="flex">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>
为什么flex div扩展到父级宽度的100%?有没有办法使flex div的宽度与其中的内容一样宽?
任何帮助表示赞赏, 谢谢
答案 0 :(得分:3)
您的#flex
div已应用display: flex
。这是一个块级命令(例如display: block
),by design占据了父级的整个宽度。请改用display: inline-flex
。