css - 如何垂直居中对齐不同高度的元素的水平列表的底部

Question

我试图在不使用绝对定位的情况下实现以下布局

原因是我想尽可能多地使用 css grid 或 flexbox，并尽可能避免从流程中剔除。在这种情况下，周围的 div 有一个应该被尊重的填充，如果涉及到，它应该在必要时增加它的高度。通常我将 max-content 与 css grid 一起使用来实现这一点。
如果它只是文本，它会像 align-items: center; 一样简单。但是，由于图像/徽章，如果我这样做，文本将无法正确对齐。
https://stackblitz.com/edit/react-ts-t4h6ff?file=style.css

.list {
  width              : 100%;
  background         : red;
  display            : flex;
  flex-direction     : row;
  align-items        : center;
  }
.list-item {
  background         : yellow;
  display            : grid;
  grid-template-rows : max-content max-content;
  padding            : 1rem;
  }

<div class="list">
  <div class="list-item">list item 1</div>
  <div class="list-item">
    <div>image</div>
    <div>list item 2</div>
  </div>
  <div class="list-item">
    <div>image</div>
    <div>list item 3</div>
  </div>
</div>

基本上 https://stackblitz.com/edit/react-ts-4xy14d?file=style.css是我想要实现的，但没有绝对位置或转换翻译。
最后是: https://stackblitz.com/edit/react-ts-78pckz?file=style.css

html,
body,
#root,
.wrapper {
  height: 100%;
  width: 100%;
}

.wrapper {
  display: grid;
  grid-template-rows: minmax(5rem, 50%) auto;
  background: purple;
}

.list {
  width: 100%;
  background: red;
  display: flex;
  flex-direction: row;
  height: 100%;
}
.list-item {
  background: yellow;
  display: grid;
  grid-template-rows: 1fr max-content 1fr;
  padding: 1rem;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
}

.image {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.text {
  align-self: center;
  white-space: nowrap;
}

<div class="wrapper">
  <div class="list">
    <div class="list-item">
      <div> </div>
      <div class="text">list item 1</div>
      <div> </div>
    </div>
    <div class="list-item">
      <div class="image-wrapper">
        <img class="image" src="https://via.placeholder.com/100" />
      </div>
      <div class="text">list item 2</div>
      <div> </div>
    </div>
    <div class="list-item">
      <div class="image-wrapper">
        <img class="image" src="https://via.placeholder.com/150" />
      </div>
      <div class="text">list item 3</div>
      <div> </div>
    </div>
  </div>
  <div>... :-)</div>
</div>

Answer 1

我不认为这是最优雅的解决方案，但这是我解决问题的方法(假设您的图表表示图像的大小将保持一致)。
编辑:我的答案并没有完全到位，但它确实帮助 Dac0d3r 提出了这个最终解决方案。他的来源在评论中。

  
  html,
  body,
  #root,
  .wrapper {
    height             : 100%;
    width              : 100%;
  }
  .wrapper {
    display            : grid;
    grid-template-rows : minmax(5rem, 50%) auto;
    background         : purple;
   }
  .list {
    width              : 100%;
    background         : red;
    display            : flex;
    flex-direction     : row;
    height             : 100%;
  }
  .list-item {
    background         : yellow;
    display            : grid;
    grid-template-rows : 50% 50%;
    padding            : 1rem;
    box-sizing         : border-box;
    height             : 100%;
  }

  .image {
     max-width         : 100%;
     max-height        : 100%;
     align-self        : end;
  }

  <div class="wrapper">
    <div class="list">
      <div class="list-item">
        <div></div>
        <div class="text">list item 1</div>
      </div>
      <div class="list-item">
        <img class="image" src="https://via.placeholder.com/100" />
        <div class="text">list item 2</div>
      </div>
      <div class="list-item">
        <img class="image" src="https://via.placeholder.com/150" />
        <div class="text">list item 3</div>
      </div>
    </div>
  </div>