我不知道这篇文章是否重复,因为我没有找到其他任何东西,但是当 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>
有人可以帮我吗?
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>
您可以简单地使用媒体查询并可以更改 .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以获得更多理解。
你可以添加一个 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>