在屏幕太小的时候可以让按钮换行吗？ HTML、CSS

Question

我不知道这篇文章是否重复，因为我没有找到其他任何东西，但是当 HTML 中的屏幕太小时，我可以更改第二个按钮进入另一“行”的按钮吗？看：

我希望第二张图片中的“加入大厅”按钮换行。这是我的 HTML 代码

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.ModeButton {
  color: #ffffff;
  background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
  border: 0px;
  font-size: 30px;
  border-radius: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  width: 500px;
  height: 350px;
  opacity: 1;
  transition: color, opacity 0.3s linear 0s;
}

<div class="Container">
  <button type="button" class="ModeButton">
    Create a new lobby
    <br>
    <br>
    <img src="images/Create.png">
  </button>
  <button type="button" class="ModeButton">
    Join a lobby
    <br>
    <br>
    <img src="images/Join.png">
  </button>
</div>

有人可以帮我吗？

Answer 1

您可以简单地使用媒体查询并可以更改 .Container

 上的

flex-direction

属性

.Container {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;

}

.ModeButton {
    color: #ffffff;
    background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
    border: 0px;
    font-size: 30px;
    border-radius: 15px;
    font-family: 'M PLUS 1p', sans-serif;
    width: 500px;
    height: 350px;
    opacity: 1;
    transition: color, opacity 0.3s linear 0s;
}

@media screen and (max-width: 480px) {
  .Container {
  flex-direction: column; // This makes the items inside a flex container to 
                             appear in column.
  }
}

结帐CSS Flexbox以获得更多理解。

Answer 2

使用

flex-wrap

和

flex-basis

值进行包装

flexbox

支持自然环绕行为，当内容区域变小时，它允许 flex 项目根据需要环绕。您可能希望使用

flex-basis

值作为 flex 子项的首选基础宽度。

请参阅下面的示例片段。

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.ModeButton {
  color: #ffffff;
  background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
  border: 0px;
  font-size: 30px;
  border-radius: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  width: 500px;
  height: 350px;
  opacity: 1;
  transition: color, opacity 0.3s linear 0s;
  flex-basis: 250px; /* adjust this value for your preference */
}

<div class="Container">
  <button type="button" class="ModeButton">
    Create a new lobby
    <br>
    <br>
    <img src="images/Create.png">
  </button>
  <button type="button" class="ModeButton">
    Join a lobby
    <br>
    <br>
    <img src="images/Join.png">
  </button>
</div>

Answer 3

你可以添加一个 flex-direction: column 到你的容器类，当你使用较小的屏幕使用媒体查询时，它们将垂直堆叠。

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

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.ModeButton {
  color: #ffffff;
  background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
  border: 0px;
  font-size: 30px;
  border-radius: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  width: 500px;
  height: 350px;
  opacity: 1;
  transition: color, opacity 0.3s linear 0s;
}

<div class="Container">
  <button type="button" class="ModeButton">
    Create a new lobby
    <br>
    <br>
    <img src="images/Create.png">
  </button>
  <button type="button" class="ModeButton">
    Join a lobby
    <br>
    <br>
    <img src="images/Join.png">
  </button>
</div>