Css 弯曲两行以在底部对齐，而不根据空间居中

我需要使两行与底部对齐，而不使用剩余空间垂直对齐第一行

当我只有一行时，它工作得很好，但是当我添加另一行时，第一行将垂直对齐，以使用剩余的空间

基本上我希望这两行位于底部，因为这样它们将与其他容器中的行对齐，并使其看起来一致。 标题的长度可以不同，因此内容中的框必须始终流向底部，以便始终对齐

如图所示：

JSFIDLE上的示例：

在这里，它显示了一行中的两行，这两行应该在单独的行上，并且都与底部对齐，没有任何间距。 我试图将“我的flex项目内容框”放在单独的行中，但没有成功。 所以我希望它如图所示，但只是所有的橙子行应该与底部对齐

示例代码：

.我的flex容器{ 显示器：flex； 柔性包装：包装； } .my flex项目包装{ 宽度：33%； 填充物：5px； 显示器：flex； } .我的弹性物品{ 边框：1px纯色灰色； 弹性：1； 显示器：flex； 弯曲方向：立柱； } .my flex项目标题{ 字号：2.5em； 背景色：F5； 边框底部：1px纯色灰色； } .my flex项目内容{ 调整项目：基线； 对齐项目：柔性端； 背景色：丽贝卡紫； 显示器：flex； 柔性包装：包装； flex-grow：继承； } .我的弹性行{ 显示器：flex； 弹性：1； } .my flex项目内容框{ 宽度：33.33%； 最小高度：100px； 颜色：白色； 背景颜色：紫色； 背景颜色：橙色； } 女王和亚当·兰伯特7月4日终极舞台体验 内容框 内容框 内容框 内容框 内容框 内容框 我想出来了。 将“.my flex row”设置为“with:100%；”及"弹性基准:自动",，它给了我一行，里面只有3个项目。 将“.my flex item content”设置为“align content:flex end；”没有间隔

---

您应该从.my flex item content中删除flex grow属性，并添加margin top:auto

如果这是一个问题，也要注意填充和框大小

.my-flex-item-wrapper {
  width: 33%;
  padding: 5px;
  display: flex;
  box-sizing:border-box;
}

---

在要固定到底部的最高行上，应用页边距顶部：自动。或在布局的顶部行上，应用页边距底部：自动。

.my-flex-item-wrapper {
  width: 33%;
  padding: 5px;
  display: flex;
  box-sizing:border-box;
}