html - flexbox 项目 - 使用拉伸对齐忽略边距底部

Question

在一组具有 'stretch' 对齐的 flexbox 项目中，当一个项目具有底部边距时，其他项目将扩展以包含该边距。有没有办法创建一个 flex 布局，即使在其中一个元素上应用了边距底部，项目也保持相同的高度？

演示：

.flex {
  display: flex;
  width: 100%;
}
  
.flex div {
    padding: 50px;
    background-color: red;
    margin: 10px;
    flex-grow: 1;
}

.flex div:first-child {
    margin-bottom: 50px;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

标签： htmlcssflexbox