переключение ориентации гибкого контейнера

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>

Я хочу использовать гибкий контейнер, чтобы вызвать .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;
}
}

1

css flexbox html php wordpress

Решение

По вопросам рекламы [email protected]

Accepted Answer

Ваш CSS недействителен. Правила внутри @media запрос не нуждается в закрывающей точке с запятой ; и наличие их сломает запрос.

Также вы открыли медиазапрос и закрыли его в той же строке @emdia (condition){} тем самым делая его устаревшим.

Правильный код будет выглядеть так:

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

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

1

Другие решения

Ваш CSS может быть упрощен. Он также содержал несколько синтаксических ошибок.

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

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

jsFiddle

1

Источник