为什么flex div父div的宽度为100%?

时间:2018-09-06 22:40:23

标签: html css css3 flexbox

对于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的宽度与其中的内容一样宽?

任何帮助表示赞赏, 谢谢

1 个答案:

答案 0 :(得分:3)

您的#flex div已应用display: flex。这是一个块级命令(例如display: block),by design占据了父级的整个宽度。请改用display: inline-flex