如何使用布局包装？答案

【问题标题】：How to use layout-wrap?如何使用布局包装？
【发布时间】：2016-03-19 18:04:45
【问题描述】：

如何通过 angular-material layout-wrap 列出项目？我想这样做

1 4 6
2 5 7
3 6 8

不是

1 2 3 
4 5 6 
7 8 9

还是不可能？

【问题讨论】：

我对 Angular 不是很熟悉，但请尝试将 layout="row" 切换为 layout="column"。您可能还需要指定内容的高度才能知道在哪里换行。
是的。 “玩”身高帮助plnkr.co/edit/PaEEGw?p=preview
codepen.io/01/pen/BNbpLN

【解决方案1】：

您想将蓝色区域转换为弹性框：

.mainHeight {
   display:flex;
   flex-flow: column wrap;
    min-height:calc(100% - 86px);
    height: calc(100% - 86px);
}

注意：我在 CSS 和 HTML 中将.mainHeigth 的拼写改为.mainHeight

【讨论】：