是否可以使用Flexbox设置响应功能列表的样式

Question

我需要构建一个在桌面或移动视图上以不同方式布局的功能列表。我的网格布局具有响应断点。

我的问题是，可以使用flex-box来构建一个如下所示的功能列表（见下图）。

是否可以仅使用flexbox和响应断点来更新flexbox？或者，每个响应式媒体查询布局是否需要两个不同的div（显示/隐藏）？

在桌面上：

在手机上

Answer 1

您有灵活方框的完全用例。你的html看起来像这样（为了清楚起见，用语义名称替换标签）：

<ion-list>
    <ion-item>
        <ion-range min="0" max="120" pin="true" [(ngModel)]="myValue"></ion-range>
    </ion-item>
</ion-list>

你想要的是2个弹性框：<featureBox> <feature> <image/> <contentBox></contentBox> </feature> </featureBox> 和featureBox。虽然feature将始终位于列中，但featureBox将更改为桌面。

feature