为什么 flex div 的宽度是父 div 的 100%？

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

您的#flexdiv 已display: flex申请。这是一个块级命令（例如display: block），根据设计，它占据父级的整个宽度。display: inline-flex代替使用。