我如何将高度相同但带有弹性盒的柔性身体部位的卡中的页脚垂直对齐

Question

我已经提出了这种最小情况：https://jsfiddle.net/frp61gh7/

HTML：

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
    some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
    <p>
    this is some kind of footer that should always stick to the bottom
</p>
    </div>
  </div>
  <div class="card">x5...etc</div>
</div>

CSS：

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
}
.footer{
  border: 1px solid red;
}
p{
  flex-grow: 1;
}

我有6张卡片，可以根据需要在flexbox容器中流动。 （蓝色边框）卡的高度和流动方式均与我想要的相同。每行纸牌的高度可能会与该行中最高的纸牌不同。在实际情况下，这可行。

但是，每张卡的主体可以根据其内容而定高低（例如，在实际情况下，productimage的宽度是固定的，而高度是可变的）。现在的问题/问题是：由于身体的高度灵活，我似乎无法将页脚格（红色边框）伸到卡的底部内部。位置：绝对是没有选择的，因为我尝试了这一点，但这样会使柔性主体变得混乱。

有什么建议吗？

Answer 1

如果您愿意为卡提供height，则可以将其固定：

如果需要，您可以提供min-height。

.row {
  display: flex;
  height: 100%;
  flex-wrap: wrap;      
}

.card {
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  /*   align-content: space-between;
   */
  /* flex-direction: column; */
  position: relative;
  min-height:300px; /* you can choose min-height or height */
}

.footer {
  border: 1px solid red;
  position: absolute;
  bottom: 0;
}

p {
  flex-grow: 1;
}

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
</div>

Answer 2

制作卡片弹性容器并将方向设置为列，然后将页脚设为margin-top:auto。

这将页脚推到每列的底部。

.row {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

.card {
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  display:flex;
  flex-direction: column;
}

.footer {
  border: 1px solid red;
  margin-top: auto;
}

p {
  flex-grow: 1;
}

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
</div>