Question

我正在动态显示卡片。例如每行3张宽度相等的卡片。当我调整浏览器窗口的大小时，卡的宽度不均匀。一些卡以不同的宽度尺寸显示。例如，第一行和第二行中只有一张卡具有不等宽度的两张卡。

 Expected result : 1. cards to be displayed in 3 columns with equal width (large screen)
2. cards to be displayed in 2 columns with equal width  (medium screen)
3. cards to be displayed in 1 column with equal width  (mobile phone)

为了在所有屏幕尺寸上均匀显示，我需要为flex布局设置哪些可能的值？

这些是使用的版本

Angular version - 2.4.10
"@angular/material": "2.0.0-beta.2",
"@angular/flex-layout@2.0.0-beta.5"

这是示例代码

<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 15px; 
 padding-top: 15px;  margin: auto;justify-content: center" >  
<md-card fxFlex.gt-md="30" fxFlex.md="30"  fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myArray" style="margin:5px;">
          <md-card-content>
            <h1></h1>
            <h2></h2>
           <h2></h2>
          </md-card-content>
          </md-card> 
        </div>

flex layout - 调整浏览器窗口大小时材料卡的宽度不等

0 个答案: