html - CSS Flex 布局未根据需要对齐元素

Question

我试图将作者名称定位在作者姓名下，自 theme 以来我尝试了一些事情使用 Flex 我发现很难让它工作。

他们到处都使用flex，如果改变一件事就会破坏另一件事。

如何将作者指定放置在作者姓名下，并进行最少的CSS更改

https://codepen.io/KGuide/pen/OJJBzmp

.article-container .article-thumbnail-wrapper {
    height: 480px;
    height: auto;
}

 .article-thumbnail-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 20px;
    padding: 0 15px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.article-author {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none !important;
}
.article-author figure {
    margin: 0;
    width: 50px;
    height: 50px;
    margin-right: 18px;
}
.article-author figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

Answer 1

刚刚将两个跨度包装到 div 并将其与具有 flex 属性的列对齐:

https://codepen.io/Nevados/pen/mddzpYw