你好,我正在 React 中制作卡片类型的组件,我在设置这个特定部分的样式时遇到问题,因为 flexbox 项目与包装器重叠。
JSX
const OtherProjects = () => {
return (
<div className='opWrapper'>
<div className="containerWrapper">
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
</div>
</div>
)
CSS
.opWrapper{
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #232A4E;
}
.containerWrapper{
display: flex;
gap: 1em;
height: 100%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 5em;
}
.item{
width: 20em;
height: 20em;
border-radius: 10px;
border: 2px black solid;
background-color: #CCF6F6;
}
在这个维度和其他维度上看都是这样的,我不知道为什么项目重叠,现在显示白色的东西
通常的浏览器视图:
只需从您的
height: 100vh;
选择器中删除.opWrapper
:
.opWrapper{
width: 100%;
margin: 0 auto;
background-color: #232A4E;
}
原因是您将高度设置为视口的高度。
您可以在这里找到一个工作示例:https://codesandbox.io/s/thirsty-wind-1ci7ei?file=/src/styles.css
你需要为此使用样式属性
尝试添加你的 CSS
Overflow-y: scroll
在您的父容器中添加上述属性。