在material-ui中更改网格项目堆叠的顺序 [英] Changing the order of Grid Item stacking in material-ui

问题描述

每当浏览器缩小时，我都会遇到网格项的堆叠顺序问题.

I have a problem with the order of stacking of grid items whenever browser shrinks.

这是我在普通桌面屏幕(lg)上想要的:

This is what I want on the normal desktop screen(lg):

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

但是在缩小浏览器后，我得到了以下结果:

But After Shrinking the browser I am getting the following result:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

我可以使用材料ui Grid布局在移动屏幕上实现此功能吗

Can I with material ui Grid layout achieve this on a mobile screen:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

我已经阅读了有关更改同一主题的CSS网格顺序的文章，但是如何使用material-ui Grid布局实现这一点.

I have read articles on changing the order of CSS-grids for the same topic but how to achieve this using material-ui Grid layout.

推荐答案

扩展到Olivier的答案Material-UI在其实现中大量使用CSS flexbox布局.如文档所引用

Extending to Olivier's answer Material-UI heavily uses the CSS flexbox layout within its implementation. As the documentation quotes

flex容器是由元素生成的框，具有计算出的flex或inline-flex显示. flex容器的流入子元素称为flex项，并使用flex布局模型进行布局.

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

因此，网格项目是弹性项目，而网格容器是通俗易懂的语言的弹性框容器.因此，当调整Box或Grid Container的大小时，我们可以在Grid项上使用order属性来更改其相对外观顺序.因此，以以下方式将样式传递到网格项应该可以解决

So Grid items are flex items and Grid Container is flexbox container in laymans language. Hence we can use the order property on Grid items to change their relative order of appearance when the Box or Grid Container resizes. So passing the style in the following manner to the grid item should work out

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

    [theme.breakpoints.up(`${DesiredScreenSize}`)]: {
      order: ${Desired_order_after_Shrinking},
    },

  }

最后执行<Grid item xs={12} md={6} className={this.props.classes.itemStyle}>将重新排序该项目.希望它能增进理解.

Finally doing <Grid item xs={12} md={6} className={this.props.classes.itemStyle}> will reorder that item. Hope it creates better understanding.

这篇关于在material-ui中更改网格项目堆叠的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！