Question

我的问题是，为什么在800px以下的分辨率上，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>

Answer 1

弹性方向实际上正确更改，问题是您在媒体查询外部和媒体查询内部有.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>

如您所见，辅助对象现在已变为全宽，并且在列方向上。

在不同分辨率下更改flexbox方向

1 个答案: