Изменить направление flexbox на другое разрешение

Question

Изменить направление flexbox на другое разрешение

Мой вопрос заключается в том, почему при разрешении ниже 800px направление flex не изменяется, элементы все еще находятся в одном ряду. То же самое происходит, если я хочу изменить порядок на другом разрешении. Вот HTML и CSS:

body {
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

article,
.aside {
  border: 1px solid black;
}

article {
  width: 50%;
}

.aside {
  width: 24%;
}

@media screen and (max-width: 800px) {
  main {
    flex-direction: column;
  }
  main>* {
    width: 100%;
  }
}

<body>
  <main>
    <article class="main-article">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </main>
</body>

1

css flexbox media-queries flex-direction

Источник

user9649431 27 июн '18 в 18:29

1 ответ

Решение

Другие вопросы по тегам css flexbox media-queries flex-direction

user1172189 27 июн '18 в 19:00 2018-06-27 19:00 · Accepted Answer · 2018-06-27 19:00

Направление изгиба действительно меняется правильно, проблема в том, что у вас есть .aside класс вне медиа-запроса и внутри медиа-запроса, вы используете * для джокера. Класс всегда будет иметь приоритет над групповым символом. Итак, вы по существу делаете .aside пункты 24% даже при менее чем 800px.

body {
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

article,
.aside {
  border: 1px solid black;
}

article {
  width: 50%;
}

.aside {
  width: 24%;
}

@media screen and (max-width: 800px) {
  main {
    flex-direction: column;
  }
  main > *,
  main > .aside {
    width: 100%;
    border-color: yellow;
  }
}

<body>
  <main>
    <article class="main-article">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
  </main>
</body>

Как вы можете видеть, отступы теперь на всю ширину, и это в направлении столбца.