弯曲两排的正确方法?

时间:2016-07-01 12:07:24

标签: flexbox angular-material

我真的很想学习棱角分明的材料布局。我做了一个简单的笔来说明我想要做的事情,我对两件事情感到困惑:

  1. 如何使用布局填充?当我把容器div放入我的行时文本溢出了框,为什么? (我的目标是占据两个方框下的整个空间)
  2. 我试图将第二行(框3所示)弯曲为页面的1/3。我将flex="33"放在行div上,但它看起来像是屏幕的第2/3行。当我将flex值设置为66时,它看起来更有趣......
  3. 以下是笔:http://codepen.io/organismen/pen/jAmzxx

1 个答案:

答案 0 :(得分:1)

你去了 - CodePen

我已经删除了很多标记,因此更容易看到正在发生的事情。您需要将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