在不同的分辨率下改变 flexbox-direction答案

【问题标题】：Change flexbox-direction on different resolution在不同的分辨率下改变 flexbox-direction
【发布时间】：2018-12-06 17:39:05
【问题描述】：

为什么在低于 800 像素的分辨率下，flex-direction 没有改变？这些项目仍然在一行上。如果我想更改不同分辨率的顺序，也会发生同样的事情。

这里是 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>

【问题讨论】：

标签： html css flexbox media-queries

【解决方案1】：

flex 方向实际上是正确改变的，问题是您在媒体查询之外和媒体查询内部都有.aside 类，您使用* 作为通配符。类将始终优先于通配符。因此，即使在小于 800 像素的情况下，您实际上也使 .aside 项目增加了 24%。

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>

如您所见，侧边现在是全宽的，并且在列方向上。

【讨论】：

有趣，它可以在 Chrome/Firefox/Safari 中正常运行。
似乎我对 google chrome 有一些问题，因为它在那里不起作用，我检查了 Firefox 上的代码，它应该可以正常工作。谢谢你的回答。
似乎问题是因为缺少：
很高兴你明白了！