如何让flex布局子容器内“This is Product”文本显示在产品名称下方

问题原因 #

你代码中对所有div元素统一设置了display: flex规则，flex布局默认是横向排列子元素，所以每个产品卡片容器（.parent下的四个子div）内部的两个span会默认横向并排，这就是你设置span为块级、替换为p标签都不生效的核心原因，和是否使用div元素承载文本没有关系。

解决方法 #

最简单的方案是缩小flex规则的生效范围，只给最外层的.parent容器设置flex布局，再调整产品卡片内部的排列规则即可：

修改后的CSS代码 #

* {
    box-sizing: border-box;
}
/* 只给外层父容器设置横向flex，实现四个卡片并排 */
.parent {
    display: flex;
    justify-content: space-between;
}

.parent > div {
    background-color: #eee;
    width: calc(95% / 4);
    padding: 20px;
    /* 可选：如果要让卡片内部内容垂直居中对齐、控制两行间距，可以加下面的规则 */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

你的HTML代码不需要做任何修改，调整CSS后就能实现产品名称在上、描述文本在下的效果。如果不想修改全局div的选择器，也可以单独给.parent > div添加flex-direction: column规则，强制产品卡片内部的元素纵向排列，也能达到同样的效果。

内容的提问来源于stack exchange，提问作者user15259381