如何使用单个网格或 flex 实现卡片的多种布局？答案

【问题标题】：How to achieve multiple layouts for cards using a single grid or flex?如何使用单个网格或 flex 实现卡片的多种布局？
【发布时间】：2022-12-03 16:04:21
【问题描述】：

我正在尝试制作如图所示的响应式卡片布局。

目前我正在做的是分别为电脑、平板电脑和手机创建布局。然后在 media query 的帮助下，我将其他两个视图的显示属性设置为 display: none。

例如：如果我在计算机视图中，计算机的卡片布局不会将显示设置为无，而其他两个将有 display as none。

这可行，但会导致大量冗余。有一种方法可以使用 flex 或 grid 实现所有三种布局。

请指导我。

【问题讨论】：

标签： css

【解决方案1】：

Flex 可以轻松实现这一点。

根据屏幕宽度，您可以添加如下媒体查询，您可以调整框宽度和最大宽度以调整框的大小。

/* tablet view */
@media only screen and (max-width: 768px){
    .parent-container {
        max-width: 320px;
    }
}


/* mobile view */
@media only screen and (max-width: 480px){
    .parent-container {
        flex-direction: column;
        align-items: center;
    }
}

你可以看看这个https://jsfiddle.net/rx4hvn/wbqoLe0y/35/

希望这可以帮助！

【讨论】：