iOS 11 App Store Cards等Flex卡的CSS设计

Question

我正试图找到一种方法来为今日标签重新创建iOS 11 App Store卡片效果，其中每个帖子都是一张卡片，当点按时，会扩展为全屏。

搜索到这一点并没有帮助，因为我得到的结果是关于 App Store和iOS 11。

我开始使用的是灵活卡网格（松散地基于Bootstrap 4卡）。我希望能够点击一张卡并将该卡扩展为全屏观看，然后点击（x）将卡恢复到原始位置。

我尝试使用position:fixed和top:0将卡片更改为left:0，并在此SO帖子中探讨了其他一些可能性：How do you expand a FlexBox item to full screen without moving the other Flex items? 但是，我遇到了与其他弹性卡跳跃相同的问题，或者点击的卡片从其原始位置跳到视口顶部。

如果您不确定我的意思或没有iOS 11设备，这里有一个屏幕录制链接： https://www.dropbox.com/s/arozweveil25cct/iOS%2011%20App%20Store%20Card.mp4?dl=0

我要求的是一些入门建议或链接到一篇探索类似内容的帖子。我只是觉得如何前进完全失去了。谢谢！

卡片HTML

<div class="row cards">

  <div class="card">
    <div class="card-text">
      <h3>Card Title</h3>
      <p>Card content.</p>
    </div>
  </div>

  <div class="card">
    <div class="card-text">
      <h3>Card Title</h3>
      <p>Card content.</p>
    </div>
  </div>

  <div class="card">
    <div class="card-text">
      <h3>Card Title</h3>
      <p>Card content.</p>
    </div>
  </div>
</div>

卡片SCSS

.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;

  .card {
    transition: all 0.25s ease-in-out;
    margin-bottom: $space/2;

    @include media-breakpoint-up(md) {
      flex: 0 1 45%;
      flex-direction: column;
      margin: $space/2 2.5%;
    }
    @include media-breakpoint-up(lg) {
      flex: 0 1 30%;
      margin: $space/2 1.666%
    }
  }
}