水平滚动上的角度材料响应网格布局

Question

我在大屏幕上有一个4 x 2列网格，看起来不错。我试图在制作平板电脑尺寸时制作它，然后将网格设为3 x 2并在移动设备上制作2 x 4。

我和flex-sm一起玩，但似乎无法弄清楚如何推动事物。

如果这有帮助，我试图获得的最终结果是水平卷轴。大屏幕将有4列，平板电脑将有3列，移动设备将有2列。然后，用户可以向左和向右滚动以加载更多内容并查看其他列。

以下是我使用

的代码

        <div flex layout="column" layout-margin>
            <md-content>
                <div layout="row">
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                </div>
                <div layout="row">
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="20" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                </div>
            </md-content>
        </div>

修改：

看起来像layout-wrap和/或mdGridList API可能是我的解决方案。但我在开始时无法获得默认的行数。例如，我将所有内容都移到了一行并添加了layout-wrap但我在桌面上获得的效果是card1 card2 card3 card4 card5，第二行（包裹元素）卡6，空白，卡片7，空白，卡片8。

        <div flex layout="column" layout-margin>
            <md-content>
                <div layout="row" layout-wrap>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                    <div layout="column" flex="auto"></div>
                    <div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center">
                        <md-card></md-card>
                    </div>
                </div>
            </md-content>
        </div>