如何使用Angular Material实现动态flex值 [英] How to implement dynamic flex value with Angular Material

问题描述

我正在尝试建立一个具有不确定数目的子div的div，我希望当子div中只有一个时，子div具有flex="100"，它占用了整行.如果有一个以上的子div(即使有三个或四个子元素)，则它们都应完全具有flex="50"，这将占行的一半.

I'm trying to build a div with uncertain number of child divs, I want the child div have flex="100" when there is only one of them, which takes the entire row. If there are more than one child divs (even if there are three or four child elements), they should all have exactly flex="50", which will take half of the row.

任何想法我该怎么做? 预先感谢.

Any idea how could I do that? Thanks in advance.

推荐答案

感谢@William S的帮助，我不应该将flex box用于静态尺寸布局.

Thanks for the help from @William S, I shouldn't work with flex box for a static size layout.

所以我与ng-class合作来解决我的问题.

So I work with ng-class to solve my problem.

HTML:

<div flex layout-fill layout="column" layout-wrap>
    <div ng-repeat="function in functions" ng-class="test" class="card-container">
        <md-card>
            contents
        </md-card>
    </div>
</div>

我的CSS如下:

.test1 {
  width: 100%;
}

.test2 {
  width: 50%;
}

$scope.test的初始值为'test1'，通过将值从'test1'更改为'test2'，子div的宽度将设置为50％.

The initial value of $scope.test is 'test1',by changing the value from 'test1' to 'test2', the width of children divs will be set to 50%.

这篇关于如何使用Angular Material实现动态flex值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！