flexbox防止并排显示两个元素

Question

在大屏幕上，我想要1行上的所有元素，在较小的屏幕上，我想要三行。基本上，我不希望仅在同一行上使用H1看到按钮。 Flexbox如何解决此问题？谢谢:)

<div class="buttoncontainer">
      <button class="change">Change background</button>
      <h1 id="currentcolor">currentcolor</h1>
      <button class="change">Change background</button>
    </div>

和CSS：

'''

.buttoncontainer {
  display: flex;
  flex-wrap: wrap;
  height: 90vh;
  justify-content: flex-start;
}
button {
  border: 10px solid black;
  font-size: xx-large;
  text-shadow: #222;
  box-shadow: 10vh;
  margin: auto;
  text-align: center;
  line-height: 4.5;
  height: 25%;
  flex-wrap: wrap;
  border-radius: 20px;

}
h1 {
  border: 10px solid black;
  margin: auto;
}

不想要这个：不好

所以我 对此

Answer 1

因此，解决此问题的最简单方法是通过媒体查询。媒体查询可以使您轻松地设置最大或最小宽度，以便以某种方式发生事物。

https：> https：https://developer.mozilla.org/en-en-us/ DOCS/WEB/CSS/MEDIA_QUERIES/used_media_queries

从我的理解中，您可以将其设置为以便每当它少于某个分辨率（在这种情况下，我设置了900px），应将flex方向属性设置为'柱子'。

@media (max-width: 900px) {
    .buttoncontainer {
        flex-direction: column;
    }
  }

这应该解决您的问题。