角材质2个md卡响应列

我正在寻找此布局的Angular 2/4示例。我需要从两列牌开始（左侧2列，右侧1列）。但是，如果屏幕很小，它们应该折叠成一列。我可以在CSS中使用div，但在Material 2中必须有一个简单的方法 - 有很多Material 1的例子。角材质2个md卡响应列

此代码是从角材料1回答适应，但它不工作（我改变了“行”到“列”希望的工作，但我只是得到一个列有三个卡）：

how do i create a grid of cards with angular material?

<div class='md-padding' layout="column" layout-wrap> 
    <md-card flex="40" flex-sm="80"> 
     <md-card-content> 
     <h2>Left Card 1</h2> 
     </md-card-content> 
    </md-card> 

    <md-card flex="40" flex-sm="80"> 
     <md-card-content> 
     <h2>Left Card 2</h2> 
     </md-card-content> 
    </md-card> 
</div> 

<div class='md-padding' layout="column" layout-wrap> 
    <md-card flex="40" flex-sm="80"> 
     <md-card-content> 
     <h2>Right Column </h2> 
     </md-card-content> 
    </md-card> 
</div>

从答案：“在这个例子中，你将有两张牌（各40％），并且当屏幕调整大小以-SM，该卡将在80％以上。”

来源

2017-09-28 beachCode

首先，在您的应用程序中添加@angular/flex-layout包。阅读更多关于"flex-layout"。然后，你需要在你的app.module.ts进口进入进口FlexLayoutModule：

import { FlexLayoutModule } from '@angular/flex-layout'; 

.... 
@NgModule({ 
    imports: [ 
     // other modules 
     // ..... 
     FlexLayoutModule 
    ], 
    ....

然后你可以在你的应用程序中使用“灵活布局”。为了使卡作为响应你所提到的，你可以使用下面的模板：

<div fxLayout="row" fxLayout.xs="column"> 
    <md-card fxFlex="40%;" fxFlex.xs="80%"> 
     <md-card-content> 
      <h2>Left Card 1</h2> 
     </md-card-content> 
    </md-card> 

    <md-card fxFlex="40%;" fxFlex.xs="80%"> 
     <md-card-content> 
      <h2>Left Card 2</h2> 
     </md-card-content> 
    </md-card> 

    <md-card fxFlex="20%;" fxFlex.xs="80%"> 
     <md-card-content> 
      <h2>Right Column </h2> 
     </md-card-content> 
    </md-card> 
</div>

链接stackblitz demo。

来源

2017-09-28 07:18:05 Faisal

THX。您的示例在大屏幕上生成3列。我正在寻找2列 - 其中之一有2行 - 然后全部在1列在一个小屏幕上。我正在查看flex-layout文档。他们有一个接近我想要的例子：https：//tburleson-layouts-demos.firebaseapp.com/#/responsive – beachCode

我找到了一个CSS柔性盒解决方案 - 我仍然更喜欢一个Angular flex布局答案，但是现在就可以做到了。感谢@Faisal指引我朝着正确的方向发展。这将在大屏幕上生成两列，第一列中有两行。如果屏幕较小，则布局将更改为三列一列。

我根据这个例子的代码：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

HTML：

<div id='main'> 
    <div id='col1'> 
     <article>article</article> 
     <nav>nav</nav> 
    </div> 
    <aside>aside</aside> 
</div>

CSS：

#main { 
    min-height: 100px; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-flow: row; 
} 

#main > col1 { 
    min-height: 100px; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-flow: column; 
} 

#col1 > article { 
    margin: 4px; 
    padding: 5px; 
    border: 1px solid #cccc33; 
    border-radius: 7pt; 
    background: #dddd88; 
    flex: 3 1 60%; 
    order: 2; 
} 

#col1 > nav { 
    margin: 4px; 
    padding: 5px; 
    border: 1px solid #8888bb; 
    border-radius: 7pt; 
    background: #dddd88; 
    flex: 1 6 20%; 
    order: 1; 
} 

#main > aside { 
    margin: 4px; 
    padding: 5px; 
    border: 1px solid #8888bb; 
    border-radius: 7pt; 
    background: #ccccff; 
    flex: 1 6 20%; 
    order: 3; 
} 

/* Too narrow to support three columns */ 
@media all and (max-width: 640px) { 
    #main, #page { 
     flex-direction: column; 
    } 

    #col1 > article, #col1 > nav, #main > aside { 
    /* Return them to document order */ 
     order: 0; 
    } 

    #main > col1, #main > aside { 
     min-height: 50px; 
     max-height: 50px; 
    } 
}

来源

2017-09-29 16:56:20 beachCode

角材质2个md卡响应列

回答

相关问题