弯曲两行的正确方法？

Question

我真的很难学习 angular material 布局。我做了一支简单的笔来说明我想做什么，我对两件事感到困惑：

如何使用布局填充？当我为我的行放入容器 div 时，文本在框中溢出，为什么？（我的目标是把两个框下的space全部占满）
我正在尝试将第二行（框 3 所在的位置）调整为页面的 1/3。我将 flex="33" 放在行 div 上，但它看起来像是在屏幕的 2/3 行。当我将 flex 值设置为 66 时，它看起来更有趣...

这是笔：http://codepen.io/organismen/pen/jAmzxx

Answer 1

我删除了很多标记，以便更容易看到发生了什么。您需要将 layout-fill 放在最上面，以便您的内容填满所有 space。然后，您必须将 flex='66' 添加到第一行（第二行仅添加 flex），然后为每个 child 添加 flex（默认情况下 ='100'） .

标记

<body>
  <div layout="column" flex layout-fill>
    <md-card>
      <md-card-content>
        This pen shows how angular materials works across different browsers
      </md-card-content>
    </md-card>

    <div layout="row" layout-xs="column" flex>
      <div layout="column" flex="66" flex-xs="100">
        <md-card class="box-1" flex>
          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iure dignissimos iste ea nisi quidem officia perspiciatis eos, quod ratione distinctio deleniti porro unde quo sequi ut debitis doloremque. Aperiam?
      </md-card-content>
        </md-card>

        <md-card class="box-2" flex>
          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iure dignissimos iste ea nisi quidem officia perspiciatis eos, quod ratione distinctio deleniti porro unde quo sequi ut debitis doloremque. Aperiam?
          </md-card-content>
        </md-card>
      </div>

      <div layout="column" flex="33" flex-xs="33">
        <md-card class="box-3" flex>
          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iure dignissimos iste ea nisi quidem officia perspiciatis eos, quod ratione distinctio deleniti porro unde quo sequi ut debitis doloremque. Aperiam?
          </md-card-content>
        </md-card>
      </div>
    </div>
  </div>
</body>

CSS

.box-1, .box-2, .box-3 {
  overflow-y: auto;
  overflow-x: hidden;
}

Documentation for layout-fill

Documentation for flex

弯曲两行的正确方法？

Correct way to flex two rows?

flexbox

angular-material