如何删除弹性子级之间的边距？

Question

在下面的代码段中，我试图创建一个记录网格，每个记录都有一个图像，详细信息（标题和子详细信息）和一个按钮。

对于保存这些记录（动态添加）的网格，我使用CSS网格创建具有列维边界的自动填充网格，而对于单个记录项，我使用了一个flexbox，其方向设置为column，以确保弹性子级与space-between一起从上到下流动。

当一行中一个记录中的详细信息的内容量大于其他记录中的其他内容时，我所遇到的问题就显而易见了，而其他记录则被压低了。

我想要的是使细节保持与图像底部齐平，而按钮仍位于底部。

.dashboard__main-content {
  padding: 1rem 0;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));
  grid-template-rows: auto;
  grid-auto-flow: dense;

}

.record {
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;
  justify-content: space-between;
  border: 0.08rem solid #2a5583;
}

.record__image-holder {
  flex-basis: 45%;
}

.record__image {
  object-fit: cover;
  width: 100%;
}

.record__details {
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin-top: 0.2rem;
  margin-bottom: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.record__title {
  margin: 0.2rem 0;
}

.record__more-btn {
  background: #2a5583;
  color: white;
  padding: 0.5rem 2rem;
  align-self: flex-end;
  border: none;
  float: right;
  margin: 1rem;
}

.record__more-btn:hover,
.record__more-btn:focus {
  border: 0.01rem solid #2a5583;
  outline: none;
  color: #2a5583;
  background: aliceblue;
}

<section class="dashboard__main-content">
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">Stacks of cash in rubber wads</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/1">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">Sanother red-flag</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/2">View More</button>
  </div>
  <div class="record record--intervention record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">need intervention</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class="record__more-btn" record-path="interventions/3">View More</button>
  </div>
  <div class="record record--intervention record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">intervention Skope 2</h4>
      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>
    </div>
    <button class="record__more-btn" record-path="interventions/4">View More</button>
  </div>
  <div class="record record--red-flag record--investigating">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">Another red-flag tester</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw
        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/5">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">some</h4>
      <p class="record__comment">s...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/6">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">where the government</h4>
      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/7">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">where the government</h4>
      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/8">View More</button>
  </div>

</section>

Answer 1

您需要给不长大的孩子flex-grow:0;和长大的孩子：flex-grow:1

.dashboard__main-content {
  padding: 1rem 0;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: dense;
  padding: 2rem;

}

.record {
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;
  justify-content: space-between;
  border: 0.08rem solid #2a5583;
}

.record__image-holder {
  flex-grow: 0;
}
.record__image-holder img {
  display: block;
}

.record__image {
  object-fit: cover;
  width: 100%;
}

.record__details {
  padding: 0.7rem 0.5rem 0.5rem 0.5rem;
  margin-top: 0;
  margin-bottom: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  flex-grow: 1;
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
}

.record__title {
  margin: 0.2rem 0;
}

.record__more-btn {
  background: #2a5583;
  color: white;
  padding: 0.5rem 2rem;
  align-self: flex-end;
  border: 1px solid transparent;
  float: right;
  margin: 1rem;
}

.record__more-btn:hover,
.record__more-btn:focus {
  border: 1px solid #2a5583;
  outline: none;
  color: #2a5583;
  background: aliceblue;
  flex-grow: 0;
}
body {margin: 0;}

<section class="dashboard__main-content">
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">Stacks of cash in rubber wads</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/1">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">Sanother red-flag</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/2">View More</button>
  </div>
  <div class="record record--intervention record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">need intervention</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class="record__more-btn" record-path="interventions/3">View More</button>
  </div>
  <div class="record record--intervention record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">intervention Skope 2</h4>
      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>
    </div>
    <button class="record__more-btn" record-path="interventions/4">View More</button>
  </div>
  <div class="record record--red-flag record--investigating">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">Another red-flag tester</h4>
      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw
        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/5">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">some</h4>
      <p class="record__comment">s...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/6">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">where the government</h4>
      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/7">View More</button>
  </div>
  <div class="record record--red-flag record--draft">
    <div class="record__image-holder">
      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">
    </div>
    <div class="record__details">
      <h4 class="record__title">where the government</h4>
      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class="record__more-btn" record-path="red-flags/8">View More</button>
  </div>

</section>

其他说明：

• 为了防止您的按钮在悬停时重排内容，在两个状态下它们的border-width必须相等（使它们在正常状态下transparent）。
• 在border-width以外的其他任何地方提供px值几乎不是一个好主意（它应该是整数）。否则，您将在浏览器中看到伪像，并且在动画（不一定是动画）期间，边框会闪烁。
• 如果将fr的正值放在重复的max的{​​{1}}值中，则元素将平均分配。