Html 将一个div置于另一个div之下（使用flexbox）

我试图将

timeAgo

即

22秒前

内容放在

info

内容的正下方。但是，对于我正在使用的样式，

timeAgo

被向右推。
这是我的标记-

.container{
溢出：自动；
}
.邮政{
高度：120px；
宽度：700px；
保证金：120px自动；
背景色：#EFEF；
边框：1px实心#794；
显示器：flex；
调整内容：灵活启动；
}
.照片{
宽度：80px；
高度：80px；
背景色：#99E058；
保证金：10px 10px 10px 20px；
自对准：居中；
}
.info{
利润率：25px 10px 10px 20px；
自对准：居中；
}
.很久以前{
利润率：80px 10px 10px 20px；
字体大小：11px；
}

这只是一个简单的信息

22秒前

最简单的方法就是调整HTML

.post{
高度：120px；
宽度：700px；
保证金：20px自动；
背景色：#EFEF；
边框：1px实心#794；
显示器：flex；
对齐内容：居中对齐；
调整内容：灵活启动；
}
伊姆格拉普先生{
文本对齐：居中；
}
.照片{
宽度：80px；
高度：80px；
背景色：#99E058；
保证金：10px 10px 10px 20px；
}
.info{
利润率：25px 10px 10px 20px；
}
.很久以前{
字体大小：11px；
}

22秒前
这只是一个简单的信息

这不是一个理想的解决方案，但仍然是

.timeAgo {
    margin: 80px 10px 10px -260px;
    font-size:11px;
}

---

这是一个简单得多的答案。使用

flex方向：列

.post {
    height:120px;
    width:700px;
    margin:120px auto;
    background-color:#EFEFEF;
    border:1px solid #79CEF4;
    display:flex;
    justify-content:flex-start; 
    flex-direction: column; /*This solves everything*/
}

为了避免将来的访问者产生混淆，请注意，即使
.timeAgo
div位于
.photo
div下，而不是问题要求的
.info
div下，答案还是被接受的。这对我来说很有效。但是我们如何在父div中间对齐这些项目呢？即使使用“对齐项目中心”也似乎不起作用