Html 如何使用flexbox对齐图像下方的标题？

我正在制作一个服装网站，只是作为一个学习项目，我对flexbox几乎一无所知，并决定将其用于此目的，我试图将产品名称和价格置于图片下方，而不是右侧，如图所示：

.products{
显示器：flex；
柔性包装：包装；
背景色：印度红；
}
.产品卡{
填充：2%；
柔性生长：1；
弹性基准：16%；
display:flex；/*这样子元素也可以使用flexbox*/
弹性：1 16%；
}
.产品形象{
最大宽度：100%；
}
.产品信息{
身高：100%；
宽度：100%；
显示：块；
左边距：5px；
}
.产品信息a{
文字装饰：无；
颜色：黑色；
光标：指针；
}
.产品信息a：悬停{
颜色：白色；
}

在您的情况下，Flex并不是真正需要的，您可能需要考虑为您的用例使用标签。

PS-在未来，通常需要用可复制的示例展示成果，但欢迎免费使用；）

更新：因为你用例子更新了你的问题。只需添加
flex-direction:column到
产品卡
类，因为默认情况下
flex
是方向
行
。干杯



我是关于这张照片的信息，嗨
很抱歉，我忘记在您的卡上添加代码使用
灵活方向：列