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

任何帮助都将不胜感激， 谢谢

- Joel Hoelting

---

"display: flex;" 属性的本质是覆盖100％的宽度，就像 "display: block;" 属性一样。如果您不想覆盖整个区域，则可以使用 "display: inline-flex" 或 "display: inline"。 - Ambuj Khanna

Answer 1

您的 #flex div 已应用了 display: flex。这是一个块级命令（例如 display: block），设计上，占据父元素的整个宽度。请改用 display: inline-flex。

- Michael Benjamin