弯曲两行的正确方法？答案

【问题标题】：Correct way to flex two rows?弯曲两行的正确方法？
【发布时间】：2016-07-01 12:07:23
【问题描述】：

我真的很努力学习有角度的材料布局。我做了一个简单的笔来说明我正在尝试做的事情，我对两件事感到困惑：

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

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

【问题讨论】：

【解决方案1】：

我已经删除了很多标记，因此更容易看到发生了什么。您需要将layout-fill 放在最上面，以便您的内容填满所有空间。然后，您必须将flex='66' 添加到第一行（第二行仅添加flex），然后为每个孩子添加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

【讨论】：

感谢您的回复！这似乎可行，但我的笔中的一个目标是进行响应式设计，如果屏幕尺寸太小，盒子会堆叠（列）。此外，您的笔中的文本似乎像在我的笔中一样溢出，我想这与布局填充有关，我们可以解决这个问题吗？
我的猜测是，在“行 div”中，我必须添加类似 <div layout="column" layout-gt-sm="row"> 的内容，但随后我的 flex 值会混乱？
@organismen 我应该能够修复响应部分，但要到周日才能修复。
@organismen 查看更新的答案和 CodePen。 layout-xs 和flex-xs 用于定义小屏幕布局。 CSS 用于确保文本不会溢出。
非常感谢！只是一个想法，假设我希望行折叠> sm，就像我在之前的评论中所写的那样不是更合乎逻辑：<div layout="column" layout-gt-sm="row"。（有点像相反的方式）当我尝试这个时，我的结果与你的解决方案不同，我想知道为什么？