我在 div 容器中收集了幾個 div（稱為按鈕）。
當試圖調整螢屏大小以檢查回應性時（試圖將它們保持在螢屏中間）而不是縮小，按鈕首先從螢屏兩側剪掉（或隱藏在后面）。
這是我的代碼：
.button {
outline: 1px solid black;
min-width: 0;
min-height: 0;
width: 10rem;
height: 10rem;
flex: 1 0 1rem;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.parentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
以下是全域樣式：
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
justify-content: center;
}
html是使用組件制作的：
<div className={parentContainer}>
<div className={container}>
<HeaderButton />
<HeaderButton />
<HeaderButton />
<HeaderButton />
<HeaderButton />
<HeaderButton />
</div>
</div>
標題按鈕組件：
const Button = () => {
return (
<div className={button}>
<h1>{props.text}</h1>
</div>
)
}
export default Button;
知道如何實作我的目標嗎？
感謝您的幫助。
uj5u.com熱心網友回復：
這很可能是由于按鈕具有固定寬度。
我建議為.container
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.container {
flex-direction: row;
}
}
這將使按鈕一個低于另一個。
uj5u.com熱心網友回復：
請使用 flex-wrap: wrap
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 50px;
margin: 5px;
background: #000000;
}<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>uj5u.com熱心網友回復：
使用 display flex 來獲得回應性和元素寬度的百分比：
body{
width:100%;
height: 100vh;
display:flex;
justify-content: center;
align-items: center;
}
.container{
width:100%;
height:100px;
display:flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.d1,.d2,.d3,.d4,.d5{
width:100px;
height:100px;
border:2px solid black;
} <div class="container">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>uj5u.com熱心網友回復：
好的，首先我要感謝大家的回復，但我需要的解決方案實際上是aspect-ratio：
.button {
width: 80%;
aspect-ratio: 1 / 1;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 90vw;
gap: 3.5%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443715.html
標籤：css
下一篇：如何獲取登錄表單的設計錯誤？