Question

在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>

我想使用Flex容器使.home-post-content位于桌面上的.home-post-thumbnail旁边，并放在较小屏幕上的缩略图下方。

我已经创建了以下CSS，但是它的方向不应该切换（即400px）。

无论屏幕宽度如何，呈现的页面始终为flex-direction: row。

.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;
    }
}

Answer 1

您的CSS无效。 @media查询中的规则不需要结束分号;，并且让它们会破坏查询。

您还打开了媒体查询并在同一行@emdia (condition){}关闭它，从而使其过时。

正确的代码是这样的：

＆＃13;

.home-post-container { border:1px solid; padding: 1em; }

@media (min-width: 400px) {
  .home-post-container {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .home-post-content { flex: 1; padding: 1em; }
}

＆＃13;

<article class="home-post-container">
  <div class="home-post-thumb">
    <img src="http://placehold.it/200x200" alt="">
  </div>
  <div class="home-post-content">
    <h4 class="post-title">title</h4>
    <p>content</p>
  </div>
</article>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/4copxqdj/

P.S尝试下次提供生成的HTML而不是WordPress PHP代码。

Answer 2

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

＆＃13;

.home-post-container {
    display: flex;
    padding: 1vw;
}
.home-post-thumb {
    flex: 1;
    margin: auto;
    border: 1px solid red;
}
.home-post-content {
    flex:3;
    border: 1px solid red;
}
@media (max-width: 400px) {
    .home-post-container { flex-direction: column; }
}

＆＃13;

<article class="home-post-container">
    <div class="home-post-thumb">POST THUMBNAIL</div>
    <div class="home-post-content">
        <h4 class="post-title">POST TITLE</h4>
        POST CONTENT
    </div>
</article>

＆＃13;

柔性容器的切换方向

2 个答案:

jsFiddle