Php flex容器的切换方向

在wordpress模板中，我生成以下html：

<article class="home-post-container">
    <div class="home-post-thumb">
        <?php if ( has_post_thumbnail() ) { 
            the_post_thumbnail(); 
        } ?>
    </div>
    <div class="home-post-content">
        <h4 class="post-title">
           <?php the_title(); ?>
        </h4>
        <?php the_content(); ?>
    </div>
</article>

---

您的CSS无效。

@media

查询中的规则不需要结束分号

并拥有它们将中断查询

您还打开了一个媒体查询，并在同一行
@emdia（condition）{}
将其关闭，从而使其过时

正确的代码如下所示：


.home post容器{边框：1px实心；填充：1em；}
@介质（最小宽度：400px）{
·本地邮政货柜{
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
}
.home post内容{flex:1；padding:1em；}
}

标题
内容

您的CSS可以简化。它还包含一些语法错误


.home邮件容器{
显示器：flex；
填充物：1vw；
}
.本垒打拇指{
弹性：1；
保证金：自动；
边框：1px纯红；
}
.主页内容{
弹性：3；
边框：1px纯红；
}
@介质（最大宽度：400px）{
.home-post容器{flex-direction:column；}
}

后缩略图
职称
帖子内容
语法错误是错误的真正原因——简化只是肉汁。谢谢
.home-post-thumb{
    flex: 1;
    margin: auto;
}
.home-post-content{
    flex:3 ;
}
@media (min-width: 401px;){}
    .home-post-container{
        display:flex;
        -webkit-flex-direction: row; 
        flex-direction: row;
        padding: 1vw 1vw;
    }
}
@media (max-width: 400px;){
    .home-post-container{
        display:flex;
        -webkit-flex-direction: column; 
        flex-direction: column;
        padding: 1vw 1vw;
    }
}