css 写level布局 |css转3d z轴一种

/* Level 布局 */
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item {
width: calc(25% - 20px);
margin: 10px;
height: 200px;
background-color: #f2f2f2;
}
@media (max-width: 768px) {
.item {
width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.item {
width: calc(100% - 20px);
}
}

上述代码展示了一个基本的 Level 布局。首先，使用display: flex将容器设置为弹性布局模式，然后通过justify-content和align-items分别控制容器内元素的水平和垂直对齐方式。同时，通过flex-wrap属性设置当元素溢出容器时如何处理。在本例中，当元素数量过多时会自动换行。接下来，通过calc函数设置元素的宽度，其中，减去的20px用来占用元素之间的间距。最后，在不同屏幕尺寸下使用@media媒体查询调整元素宽度，从而实现自适应布局效果。