如何删除 flex 子项之间的边距？

Question

在下面的 sn-p 中，我正在尝试创建一个记录网格，每个记录都有一个图像、详细信息（标题和子详细信息）和一个按钮。

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

我遇到的问题在附加的 sn-p 中很明显，当一行中的一条记录中详细信息的数量内容大于其他记录时，其他记录会被下推。

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

.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）。
• 在px 以外的任何地方提供border-width 值几乎从来都不是一个好主意（它应该是一个整数）。否则，您会在浏览器中看到伪影，并且您的边框会在动画期间闪烁（不一定是它们的动画）。
• 如果您在重复的grid-template-columns 的max 值中放置一个正的fr 值，则您的元素将平均分布。