小编Era*_*sus的帖子

所以看来我误解了有关 Flexbox 的一些内容，并且无法正确解决问题。

我有一个 Flexbox 容器，其中包含四列，它们是 Flexbox 容器的直接子级。一旦浏览器窗口宽度达到 992px 及更低，我想进行更改，以便 .flexbox-item 占据容器宽度的 50%。

问题：
如果我不在 .flexbox-container 上使用“gap”属性，它似乎工作正常，但是一旦我设置了gap：1em，那么百分比就无法正常工作，据我所知，间隙被考虑在内并增加了宽度到那些 .flex-item 项目。

问题：
我如何正确确保一旦浏览器窗口为 992px 或更低，每个 Flexbox 项目都占 50%，这样我可以在每行中有两列，因为显然我可以使用“width”属性并给它假设 45 % 它会起作用，但对我来说它看起来不是一个正确的解决方案。我想知道当使用“间隙”属性时仍然正确使用这些百分比的最简单方法是什么。

这是我的代码：

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1em;
}

.flexbox-item {
  width: 25%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
  .flexbox-item {
    width: 50%;
  }
}

<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div …

所以我创建了小提琴： https: //jsfiddle.net/4ex7uh8g/

问题是我不理解该小提琴特定代码行的语法差异。查看 JavaScript 选项卡中的第 24 行。在这里它使用这样的语法：<div style={{...spanStyle}}>我也尝试使用这样的语法：<div style={spanStyle}>并且它也工作得很好，当我检查样式属性被注入相同时，所以对我来说，看起来一切都是一样的，只是语法上的差异，但我我不太确定，在选择其中之一时我是否会遗漏某些内容或产生误解？

我也读过这个帖子：React 中的这三个点有什么作用？

它解释了有关三点运算符的一些事情，我对这个扩展运算符非常熟悉，但在我提供的示例中，我仍然看不到扩展运算符有什么区别，它没有分离属性和值，它的工作原理与{spanStyle}，那么对我来说 {{...spanStyle}} 和 {spanStyle} 的行为相同吗？

如果您能指出差异（如果有）以及何时以及为什么我应该使用一种语法而不是另一种语法，我将非常感激。