我有一个 flex 项目的容器，我试图根据屏幕大小在不同的布局中组织不同数量的 flex 项目。例如，在桌面上，我想要有 4 个容器，每个容器有 2 个项目，排列在 2x4 网格中，每个单元格是 1x2。我似乎无法理解的是完全使用 flexbox 在平板电脑上获得布局。任何指向正确方向的指针都会很棒。
div {
box-sizing: border-box;
width: 100%;
}
.container {
display: flex;
border: 1px solid red;
flex-wrap: wrap;
flex-direction: row;
padding: 10px;
}
.cell {
display: flex;
flex: 50%;
padding: 10px;
border: 1px solid blue;
height: 100px;
}
.data {
width: 100%;
justify-content: middle;
flex: 1;
border: 1px solid green;
}
@media only screen and (max-width: 1024px) {
.container {
display: inline-block;
position: relative;
}
#cell1 { …