小编4nd*_*ndy的帖子

当我使用 flexbox 时，如果我想要一个边距来为每个元素添加间距，我通常会这样做：

.flexbox-item {
  flex: 1 0 auto;
  margin-right:10px;
}
.flexbox-item:last-of-type {
  margin-right: 0px;
}

如果我不使用 flex-wrap，这会起作用，因为它们的最后一项将始终是该行中的实际最后一项。

但是，当我使用 flex-wrap 时，该行的最后一项会根据窗口宽度而变化（并且会自动添加更多行），这意味着有时我会从一行中的第一项中删除右边距。

有人知道这个问题的解决方案吗？

编辑：我不相信这是重复的

这是关于保持行水平相等，而不是垂直。

无论如何，我的解决方案是使用负边距，通过挖掘它可以在该线程上找到它，但这不是最流行的解决方案。这是我的解决方案：

似乎这个问题的答案是给父 flexbox 容器添加一个负边距。

.flexbox-container {
  margin-right:-10px;
}
.flexbox-item {
  flex: 1 0 auto;
  margin-right:10px;
}

然后当您的 flexbox 项目更改为 100% 时，只需从项目中删除右边距：

@media (max-width: 767px) {
    .flexbox-item {
      margin-right:0px;
    }
    .flexbox-container {
      margin-right: 0px;
    }
}

如果有更好的解决方案，我会全力以赴。

我正在尝试在模式中观看 onClick 视频，而无需访问视频页面本身。

我正在使用 Vue.js，通过一系列 Ajax 调用，我能够完成大部分工作。

Codpen： https: //codepen.io/nolaandy/pen/BrbBzO

如果您点击顶部的“对阵太阳队”，您会看到所有视频帖子的列表。然后单击任何图像，模式组件会弹出并动态获取帖子的标题。

我也想在那里运行视频，所以我尝试运行这个脚本标签：

 < script class="_nbaVideoPlayerScout" data-team="warriors" data-videoId="/video/{{unique videoId from post ajax call}}" data-width="768" data-height="732" src="https://www.nba.com/scout/team/cvp/videoPlayerScout.js"></script>

当模式弹出时，我看到我单击的帖子/图像的正确标题，并且我看到脚本标签与检查器中应有的完全相同，但脚本标签从未运行。

我应该有什么不同的方式来注入这个脚本吗？（这是在 axios 响应调用内部）

let theVideoId = response.data.content[0].videoID


let s = document.createElement('script')
s.setAttribute('class', '_nbaVideoPlayerScout')
s.setAttribute('data-team', 'warriors') 
s.setAttribute('data-videoId', '/video/' + theVideoId) 
s.setAttribute('data-width', '768') 
s.setAttribute('data-height', '732') 
s.setAttribute('src', 'https://www.nba.com/scout/team/cvp/videoPlayerScout.js')
document.getElementById('popupVideo').appendChild(s);

模态组件——点击帖子缩略图之一时触发

const videoModal = Vue.component('VideoModal', {
props: {
    id: {
    type: String,
    required: true
    }
},
data: function () {
  return {
    post: [],
  }
},
mounted() { …