.Index { font-size: 16px; padding: 20px; display: flex; flex-direction: column; background-color: #fafafa; .up { width: 100%; min-height: 100px; // background-color: red; margin-bottom: 20px; border-radius: 1%; background-color: #fff; .upText { // width: 100%; padding: 40px; font-size: 20px; } } .items { display: flex; flex-direction: row; align-items: center; // justify-content: space-between; flex-wrap: wrap; gap: 30px; /* 设置元素之间的间隔 */ // padding-left: 10px; /* 确保两侧固定边距 */ // padding-right: 10px; // background-color: aqua; .item { flex-grow: 1; /* 自动增长填充空间 */ flex-basis: 260px; /* 基本宽度为 300px,元素数量随可用空间调整 */ max-width: 330px; /* 设置最大宽度 */ // width: 100%; /* 确保可以响应式变化 */ height: 280px; background-color: yellow; margin-bottom: 20px; border-radius: 5%; position: relative; color: white; .itemUp { margin-top: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; z-index: 1; width: 100%; height: 20px; // background-color: burlywood; position: absolute; top: 0px; .itemUpleft { height: 100%; display: flex; flex-direction: column; align-items: center; // justify-content: center; font-size: 20px; margin-left: 10px; // background-color: yellow; } .itemUpright { margin-right: 10px; display: flex; flex-direction: row; align-items: center; // justify-content: center; .itemUprightWifi { margin-left: 10px; } } } .itemiddle { font-size: 30px; display: flex; flex-direction: row; align-items: center; justify-content: center; z-index: 1; width: 100%; height: 20px; // background-color: green; position: absolute; top: 50%; } .itemDown { display: flex; flex-direction: row; align-items: center; justify-content: space-between; z-index: 1; width: 100%; height: 20px; // background-color: red; position: absolute; bottom: 10px; margin-bottom: 10px; .itemDownleft { margin-left: 10px; display: flex; flex-direction: row; align-items: center; // justify-content: space-between; } .itemDownright { margin-right: 10px; } } } } .custDom { width: 100%; height: 40px; background-color: red; color: aqua; } }