为什么flex div 100％父div的宽度？

Question

我很困惑为什么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只与其中的内容一样宽？

任何帮助表示感谢，谢谢

Answer 1

你的#flex div应用了display: flex。这是一个块级命令（例如display: block），by design占据父级的全宽。请改用display: inline-flex。