角材質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卡響應列

回答

相關問題