Angular Material 的固定弹性尺寸应该如何定义？

Question

我得到了以下标记

<div layout="column" layout-align="space-around center" ng-cloak>
  <div flex="85">
    <div layout="row" layout-align="space-around center">
      <div flex>
        <md-button class="md-fab md-warn" ui-sref="settings">
          <ng-md-icon icon="settings" style="fill:white"></ng-md-icon>
        </md-button>
        <span class="md-subhead">Configuraciones</span>
      </div>
      <div flex>
        <md-button class="md-fab md-primary" aria-label="Eat cake" ng-click="watch()">
          <ng-md-icon icon="play_arrow" style="fill:white"></ng-md-icon>
        </md-button>
      </div>
    </div>
  </div>
  <div flex="15">
    <div layout="row" layout-align="space-around center">
      <div flex>
        <img src="public/img/buap-logo.png" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
      </div>
      <div flex>
        <img src="public/img/lke-logo.jpg" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
      </div>
    </div>
  </div>
</div>

制作以下内容：

但是我需要按钮 div 占据其父容器高度的 85%，这就是为什么我添加了flex="85" 属性，而带有图像的 div 应该是高度的 15%。

我不确定我应该如何设置它们的属性来获得它。根据应该使它工作的文档。

Answer 1

Flex 仅适用于宽度。没有办法使用 flex 来判断 div 的高度。 属性 layout="column" 仅表示 div 从上到下显示，行从左到右显示。

来自 material.angular.org

column：垂直排列的项目。 max-width = 100%，max-height 是容器中项目的高度。

您可以在 img 标签中使用类似 'height:15vh' 的 css 样式并试一试