Flex Grid - ala標題 - 使用md卡

我試圖創建一個具有最小寬度的卡片響應列表，根據瀏覽器大小填充所有可用空間（1,2,3行）。Flex Grid - ala標題 - 使用md卡

到目前爲止，我有代碼是什麼：

<div class='md-padding' layout="row" layout-wrap> 
    <md-card style="min-width: 460px;" ng-repeat="teacher in tc.teachers" flex> 
    <md-card-title> 
     <md-card-title-text> 
     <span class="md-headline" style="padding-bottom: 10px;">{{ teacher.name }}</span> 
     ... other elements .... 
     </md-card-title-text> 
     <md-card-title-media> 
     <div class="md-media-lg card-media" style="height: 228px;"> 
      <img ng-if="teacher.image" ng-src="{{ tc.getImage(teacher) }}" class="md-card-image" > 
     </div> 
     </md-card-title-media> 
    </md-card-title> 
    </md-card> 
</div>

什麼訣竅是在線路＃2 和flex

不過，我面對的問題是，最後一個元素也是「彎曲」整個寬度看起來很醜，例如有一排3張牌，最後一排只有1個元素...

如何在這種情況下將最後一個元素調整爲1/3迴應針對進一步的尺寸變化？

我正在使用角材料的角1.6.1。

來源

2017-07-15 bensiu

什麼是'[flex]'的CSS？你能否提供一個snipet或jsfiddle代碼？ – Duannx

使卡片容器顯示：flex;然後給卡（卡柔性容器的孩子）這個屬性flex-grow：1。希望這有助於您提供的信息量有限。 – Eggineer

不知道我明白這個問題。正如@bhv提到你應該嘗試創建一個演示來向我們展示。基於我的理解，我認爲你不應該使用'raw css'來管理元素的寬度。這裏有一些可以幫助你的開始：https://jsfiddle.net/laguiz/7Loes916/（你可以使用響應式flex -...和layout -...：https://material.angularjs.org/latest/layout/introduction） – Maxence

要做到這一點，你可以用角料MD-網格列表和MD-電網瓦（你可以查看文檔here和here），你可以指定你想要多少列，每個屏幕大小（xs，sm，md，lg等）列的高度和其他一些東西。

如果最後一行僅有一個元素，則此元素不會大於其他元素。

您可以使用它像這樣：

<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-lg="4" md-row-height="100px"> 
    <md-grid-tile ng-repeat="teacher in tc.teachers"> 
     <!-- width : 100% -> to make the cards gets the full width --> 
     <md-card style="width:100%;"> 
      <md-card-title> 
       <md-card-title-text> 
        <span class="md-headline">{{ teacher.name }}</span> 
        ... other elements .... 
       </md-card-title-text> 
      </md-card-title> 
     </md-card> 
    </md-grid-tile> 
</md-grid-list>

Here是一個工作的例子。

來源

2017-07-18 13:43:17 JeanJacques

作品魅力 - 謝謝 – bensiu

Flex Grid - ala標題 - 使用md卡

回答

相關問題