这里简单说下思路。看给出的截图的布局时每个item 的内容都是一样的,在大屏下左侧的突出重点,一个item 独占。可以使用 flex 布局,左左右各一个容器,水平排列,右侧容器中放其他 item, 竖直排列;移动端时,外层两个大容器由水平排列变为竖直排列,依然可以突出第一个 item。同样的思路 可以使用 grid 布局,只不过不再需要嵌套外层的两个容器,在使用类似vue的列表渲染时可以考虑,不然使用 flex 就麻烦点。
这里简单说下思路。看给出的截图的布局时每个item 的内容都是一样的,在大屏下左侧的突出重点,一个item 独占。可以使用 flex 布局,左左右各一个容器,水平排列,右侧容器中放其他 item, 竖直排列;移动端时,外层两个大容器由水平排列变为竖直排列,依然可以突出第一个 item。同样的思路 可以使用 grid 布局,只不过不再需要嵌套外层的两个容器,在使用类似vue的列表渲染时可以考虑,不然使用 flex 就麻烦点。