在列中堆叠时，弹性项目的底部被切断答案

【问题标题】：Bottom of flex item is cut off when stacked in column在列中堆叠时，弹性项目的底部被切断
【发布时间】：2021-10-12 06:53:27
【问题描述】：

（编辑）请查看代码笔here。

我正在使用 Vue.js 和弹性框制作卡片堆栈，以在我的网站上显示各种应用程序。我为每张卡片使用一个组件，并使用 Vues 的 for 函数使用以下模板 html 渲染卡片：

<div class="card">
    <img src="">
    <h1>Title</h1>
    <a>Click</a>
</div>

这个组件叫做“app-card”。我在以下 HTML 中呈现卡片：

<div id="app">
    <div class="row">
        <div id="card-container">
            <app-card> <!--Above HTML from template goes here--> </app-card>
        </div>
        <div id="main"></div>
    </div>
</div>

我的卡片组使用以下 SASS（在这种情况下没有 { } 的 CSS）：

*
    margin: 0
    padding: 0 
    font-family: 'Montserrat', sans-serif !important
    box-sizing: border-box

.row
    display: flex
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: auto

#card-container
    flex: 10%

#main
    flex: 90%

.card
    width: 100%
    margin-top: 0;
    margin-bottom: auto;

.card img 
    width: 100%
    max-width: 100%

.card a
    padding: 10px
    background: blue

但是，如下图所示，牌组中下一张卡片的顶部会切掉上面卡片的按钮底部：

我将如何解决这个问题？在使用 Bootstrap-4 多年后，我才开始学习 flex-box。

【问题讨论】：

我不确定这是否因为您没有提供有效的代码示例。但我认为为 .card 设置 margin-top 可以解决问题。尝试类似 margin-top: 30px;
这确实显示了完整的按钮，但对我来说似乎不是最好的解决方案......当我增加其中一个元素的填充时，卡片的长度肯定会自动延长吗？我不确定，因为我是 flexbox 的新手，这在以前从来都不是问题。生病创建一个代码笔并附上它。

标签： html css vue.js sass

【解决方案1】：

您可以通过在 card 类中添加 margin-bottom 属性来解决此问题。

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif !important;

  box-sizing: border-box;
}

.row {
  display: flex;

  flex-wrap: wrap;

  justify-content: space-evenly;

  align-items: auto;
}

#card-container {
  flex: 10%;
}

#main {
  flex: 90%;
}

.card {
  width: 100%;
  margin-bottom: 50px;   /* Add Margin Bottom */
}

/* For last card no margin bottom */
.card:last-child{
  margin-bottom:0;
}

.card img {
  width: 100%;
  max-width: 100%; 
}

.card a {
  padding: 10px;
  background: blue;
}

<div class="row">
  <div id="card-container">
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
  </div>
  <div id="main">

  </div>
</div>

【讨论】：

【解决方案2】：

.card a {
  padding: 10px;
  background: blue;
  display:block;
}

【讨论】：

这使得按钮跨越卡片的整个宽度，如果你用codepen试试就可以看到这个效果。