如何使用FlexLayout，Angular 4，Material Design來增加一個組件的高度

我想在兩行之間獲得間距，如plunkr所示，但我也希望中間的單元格爲藍色，在頂部行，是不同的高度。如何使用FlexLayout，Angular 4，Material Design來增加一個組件的高度

當我改變一個單元格的高度時，它會改變整個行。一個我一直在大是class="two"

我有這個網站：

<md-card class="card-demo"> 
    <md-card-title>another example</md-card-title> 
    <md-card-subtitle>some test work. 
    </md-card-subtitle> 
    <md-card-content> 
    <div fxLayout="column" ng-app="demoApp" layout-fill> 
     <div fxLayout="row" fxLayoutGap="20px" flex> 
     <div class="one" fxFlex="70"> test1 </div> 
     <div class="two" fxFlex="25"> test2 </div> 
     <div class="three" fxFlex="25"> test2 </div> 
     </div> 
     <div fxLayout="column" fxLayoutGap flex> 
     <div class="four" fxFlex="150"> test1 
      <p>one</p> 
      <p>one</p> 
     </div> 
     </div> 
    </div> 
    </md-card-content> 
</md-card>

而這個CSS：

.one { 
    background-color: red; 
} 

.two { 
    background-color: blue; 
} 

.three { 
    background-color: green; 
} 
.four { 
    background-color: yellow; 
}

來源

2017-08-16 James Black

你能解釋一下你想達到什麼嗎？ – Vega

@Vega - 基本上我們有三個頂部的div。我想要一個更大，但其他兩個保持相同的大小。我正在嘗試查看是否可以匹配UI設計者的要求。 –

有四個div。在運動員和你的代碼中。在你的代碼中有三個顏色的「區域」。哪一個應該更大？你能爲我命名嗎？ – Vega

您可以添加fxLayoutAlign改變默認的Flex行爲

<div fxLayout="row" fxLayoutGap="20px" flex fxLayoutAlign="stretch flex-start"> 
    <div class="one" fxFlex="70"> test1 </div> 
    <div class="two" fxFlex="25"> test2 </div> 
    <div class="three" fxFlex="25"> test2 </div> 
    </div>

https://stackblitz.com/edit/angular-pmborb?embed=1&file=app/app.module.ts

來源

2017-09-23 20:51:10

我使用了網格佈局，但我也喜歡你的方法。 –

如何使用FlexLayout，Angular 4，Material Design來增加一個組件的高度

回答

相關問題