https://codesandbox.io/s/frosty-water-fintki
正如您在附加的沙箱中看到的那樣，我有一個可滾動的 div，其中 6 個專案排列成 2 行。
但是，當您切換到移動視圖（在沙箱 url 輸入附近切換回應式視圖按鈕）時，它開始垂直滾動。
我注意到，如果您洗掉flex-wrap它可以正常作業，但我需要它來制作 2 行。
如何在移動設備和臺式機上獲得相同的行為？
uj5u.com熱心網友回復：
當您必須考慮二維時，CSS 網格將使您更容易（恕我直言）控制布局。
這是一個使用元素大小的簡單示例。
.wrapper {
display: grid;
width: 100vw;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.button-item {
background-color: red;
width: 170px;
height: 146px;
border-radius: 27px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}<div class="wrapper">
<div class="button-item">1</div>
<div class="button-item">2</div>
<div class="button-item">3</div>
<div class="button-item">4</div>
<div class="button-item">5</div>
<div class="button-item">6</div>
</div>uj5u.com熱心網友回復：
問題是您在此類中添加了顯示無。
.wrapper::-webkit-scrollbar {
display: none;
}
在對這個類發表評論后，6 個專案出現正確。
uj5u.com熱心網友回復：
如果將row類添加到.css檔案中，則每行將有 3 個元素：
import "./styles.css";
export default function App() {
return (
<div className="App">
<div className="wrapper">
<div className="row">
<div className="button-item">1</div>
<div className="button-item">2</div>
<div className="button-item">3</div>
</div>
<div className="row">
<div className="button-item">4</div>
<div className="button-item">5</div>
<div className="button-item">6</div>
</div>
</div>
</div>
);
}
并將其添加到您的.css：
.wrapper {
overflow-x: scroll;
max-height: 300px;
justify-content: space-between;
flex-wrap: wrap;
}
.row {
display: flex;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494416.html
標籤：javascript html css 反应 弹性盒