Html Flexbox对齐底部

我有一系列使用flexbox的卡片，我希望底部元素（在本例中是一个podcast小部件）与底部（flex端）对齐，而其他元素与顶部对齐

我对前端web开发还比较陌生，觉得我只是缺少了一些基本的想法来让它发挥作用。谢谢你的帮助

这是我目前的代码笔，我想让它贴到底

html，
身体{
字体系列：无衬线；
字体大小：16px；
}
/*排版和助手*/
.文字权利{
文本对齐：右对齐；
}
/*布局*/
部分{
显示：块；
填充：2rem0；
}
.集装箱{
宽度：1200px；
最大宽度：1200px；
保证金：0自动；
位置：相对位置；
}
.栏目{
显示器：flex；
左边距：-0.75雷姆；
保证金权利：-0.75雷姆；
最高保证金：-0.75雷姆；
/*-页边距用于嵌套*/
}
.列：最后一个子{
保证金底部：-0.75雷姆；
}
.列：非（：最后一个子项）{
边缘底部：0.75雷姆；
}
.栏目{
显示：块；
-ms flex首选尺寸：0；
弹性基准：0；
-webkit-box-flex:1；
-ms-flex阳性1例；
柔性生长：1；
-ms-flex阴性：1；
弹性收缩：1；
填充：0.75rem；
}
.对齐底部容器{
页边顶部：自动；
对齐项目：柔性端；
}
.对齐底部项目{
页边顶部：自动；
显示：块；
}
/*布局对齐*/
.将项目与底部对齐{
对齐项目：柔性端；
显示器：flex；
证明内容：中心；
}
.flex{
显示器：flex；
}
/*纸牌*/
.弹性卡{
左边框：.5em实心#0093d0；
背景色：#f7f7f7；
填充：1em 1em 0 1em；
}
.二{
宽度：50%；
弹性基准：50%；
最小宽度：50%；
}
.卡片内容{
填充：1.5雷姆；
}
.blog类别{}
.blog标题{}
.blog meta{}
.blog说明{}

专家策略

重点购买
2017年8月8日播客18

如果技术可以成为一个破坏者，那么它将是一个破坏者。Zillow有一个试点项目
阅读更多
专家策略

重点购买
2017年8月8日播客18


Lorem ipsum dolor坐在amet Concertetur，告别精英。临时性公积金发明人维利特阻碍最大限度地保护消费者权益，真正的自由权利是保护消费者权益，保护受害者权益，保护受害者权益
区别。

阅读更多

对齐项的flex属性：flex end属于您试图对齐的flex项的父项，这里的问题是您试图将此属性应用于您的“footer”，它是您假定为flex父项的子项。页脚的父级实际上是

.column

类，其属性为

display:block

要实现所需功能，只需将这两行添加到
.column
类中即可

display: flex;
flex-direction: column;

这将启用您的
页边距顶部：0要生效的属性

另一种方法是使用属性
justify content:flex end属于弹性项/子项的父项。因此，您的页脚将与父项的末尾对齐。然后使用属性
边距底部：0“浮动”到远离页脚的位置

.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-card {
  margin-bottom: auto;
  border-left: .5em solid #0093d0;
  background-color: #f7f7f7;
  padding: 1em 1em 0 1em;

}


html，
身体{
字体系列：无衬线；
字体大小：16px；
}
/*排版和助手*/
.文字权利{
文本对齐：右对齐；
}
/*布局*/
部分{
显示：块；
填充：2rem0；
}
.集装箱{
宽度：1200px；
最大宽度：1200px；
保证金：0自动；
位置：相对位置；
}
.栏目{
显示器：flex；
左边距：-0.75雷姆；
保证金权利：-0.75雷姆；
最高保证金：-0.75雷姆；
/*-页边距用于嵌套*/
}
.列：最后一个子{
保证金底部：-0.75雷姆；
}
.列：非（：最后一个子项）{
边缘底部：0.75雷姆；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
-ms flex首选尺寸：0；
弹性基准：0；
-webkit-box-flex:1；
-ms-flex阳性1例；
柔性生长：1；
-ms-flex阴性：1；
弹性收缩：1；
填充：0.75rem；
}
.对齐底部容器{
页边顶部：自动；
对齐项目：柔性端；
}
.对齐底部项目{
页边顶部：自动；
显示：块；
}
/*布局对齐*/
.将项目与底部对齐{
显示器：flex；
证明内容：中心；
}
.flex{
显示器：flex；
}
/*纸牌*/
.弹性卡{
左边框：.5em实心#0093d0；
背景色：#f7f7f7；
填充：1em 1em 0 1em；
}
.二{
宽度：50%；
弹性基准：50%；
最小宽度：50%；
}
.卡片内容{
填充：1.5雷姆；
}
.blog类别{}
.blog标题{}
.blog meta{}
.blog说明{}

专家策略

重点购买
2017年8月8日播客18

如果技术可以成为一个破坏者，那么它将是一个破坏者。Zillow有一个试点项目
阅读更多
专家策略

重点购买
2017年8月8日播客18


Lorem ipsum dolor坐在amet Concertetur，告别精英。临时性公积金发明人velit阻碍了最大程度地节约成本