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

Question

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

我的问题是，是否可以使用 flex-box 来构建如下所示的功能列表(见下图)。

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

在桌面上:

在手机上

Answer 1

您有 flexbox 的确切用例。您的 html 看起来像这样(为清楚起见，用语义名称替换标签):

<featureBox>
   <feature>
       <image/>
       <contentBox></contentBox>
   </feature>
</featureBox>

您想要的是 2 个 flexbox :featureBox 和 feature。虽然 featureBox 将始终位于一列中，但 feature 将针对桌面进行更改。

featureBox, feature {
   display: flex;
   flex-direction: column;
}

@media (...) {
   feature {
      flex-direction: row;
   }
}