flex容器内的底部对齐div答案

【问题标题】：Bottom align div inside flex containerflex容器内的底部对齐div
【发布时间】：2021-10-25 19:03:24
【问题描述】：

有两个盒子 (outerboxes) 并排成一排。我使用 flexbox 使两个盒子的高度相等。在每个框中，文本应从顶部（即图像下方）对齐，并且按钮应出现在框的底部。如何将按钮与底部对齐？我尝试了多种方法来制作嵌套的弹性盒子，但对我来说没有任何效果。

css

.rowDisplay {
  display: flex;
}
.outerbox {
  border: 1px solid black;
}
.buttonClass {
  /* tried flex box here as well*/
}

<div className = rowDisplay>
  <div className = outerbox>
    <image src = 'path/to/image'>
    <div>
      <div className = textClass>
          {text}  //The text here comes from a variable
      </div>
      <div className = buttonClass>
          <Button onClick={this.handleClickFunction}>
                Click Me
          </Button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你附加的代码没用，请包含一个可复制的sn-p - 我的意思是写变量text和Button中的内容
@aaandri98 图像下方的文本（“这是单行……”和“这是双行……”）存储在text 变量中。我编辑了描述。现在清楚了吗？
为什么不用绝对定位？
见这里：stackoverflow.com/questions/31000885/…

标签： javascript css flexbox

【解决方案1】：

您可以尝试使用嵌套网格：

.rowDisplay {
  display: flex;
  width: 100px;
}
.outerbox {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid black;
  margin: 1em;
}
.buttonClass {
  align-self: end;
  border: 1px solid black;
  margin: 1em;
  padding: .5em;
}
.content {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
}
.textClass {
  align-self: start;
  margin: .5em;
}

<div class="rowDisplay">
  <div class="outerbox">
    <image src="https://picsum.photos/150" />
    <div class="content">
      <div class="textClass">
         text text text text text
      </div>
      <div class="buttonClass"> 
         Button
      </div>
    </div>
  </div>
  <div class="outerbox">
    <image src="https://picsum.photos/150">
    <div class="content">
      <div class="textClass">
         text 
      </div>
      <div class="buttonClass"> 
         Button
      </div>
    </div>
  </div>
</div>

【讨论】：