Question

我正在尝试构建一个具有不确定数量的子div的div，我希望子div只有flex="100"，而只有其中一个占用整行。如果有多个子div（即使有三个或四个子元素），它们都应该具有flex="50"，这将占用该行的一半。

任何想法我怎么能这样做？提前谢谢。

Answer 1

另一种方式是public void postUser(@RequestBody User users)并在控制器中定义和修改<div flex="{{::flexSize}}"></div>，例如flexSize

Answer 2

感谢@William S的帮助，我不应该使用flex box来进行静态尺寸布局。

所以我使用ng-class来解决我的问题。

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％。

Answer 3

定义＆＃34; flex＆＃34;在元素内部将始终尝试占用父级允许的最大空间，而不提供任何参数以进行flex。这需要伴随layout =＆＃34; row / column＆＃34;，因此flex会向正确的方向扩展。

这是你正在寻找的吗？ http://codepen.io/qvazzler/pen/LVJZpR

请注意，最终，项目将在父级大小之外开始增长。你可以通过几种方式解决这个问题，但我认为这超出了问题的范围。

<强> HTML

<div ng-app="MyApp" ng-controller="AppCtrl as ctrl">
  <h2>Static height list with Flex</h2>
  <md-button class="thebutton" ng-click="addItem()">Add Item</md-button>
  <div class="page" layout="row">
    <md-list layout-fill layout="column">
      <md-list-item flex layout="column" class="listitem" ng-repeat="item in items" ng-click="logme('Unrelated action')">
        <md-item-content layout="column" md-ink-ripple flex>
          <div class="inset">
            {{item.title}}
          </div>
        </md-item-content>
      </md-list-item>
    </md-list>
  </div>
</div>

<强> CSS

.page {
  height: 300px; /* Or whatever */
}

.thebutton {
  background-color: gray;
}

.listitem {
  /*height: 100px;*/
  flex;
  background-color: pink;
}

<强> JS

angular.module('MyApp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      title: 'Item One',
      active: true
    } ];

    $scope.addItem = function() {
      newitem = {
      title: 'Another item',
      active: false
    };

      $scope.items.push(newitem);
    }

    $scope.toggle = function(item) {
      item.active = !item.active;
      console.log("bool toggled");
    }

    $scope.logme = function(text) {
      alert(text);
      console.log(text);
    }
  });

Answer 4

在下面使用：

scope.flexSize = countryService.market === 'FR'? 40: 50;

<div flex="{{::flexSize}}">

如何使用Angular Material实现动态flex值

4 个答案: