我真的很想学习棱角分明的材料布局。我做了一个简单的笔来说明我想要做的事情,我对两件事情感到困惑:
flex="33"
放在行div上,但它看起来像是屏幕的第2/3行。当我将flex值设置为66时,它看起来更有趣...... 答案 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;
}