Question

我正在阅读Angular Materials Layout Container。在＆＃39;布局指令＆＃39;的示例中，代码存在：

<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
</div>
<div layout="column">
  <div flex>First item in column</div>
  <div flex>Second item in column</div>
</div>

对我来说没有意义的是，第一个<div layout="row">仅跨越行的50％，而不是整行。该行的一半与兄弟<div layout="column">共享。

由于<div layout="column">是<div layout="row">的兄弟，所以它不应该在<div layout="row">中。

令我感到困惑的是，<div layout="column">的行为好像是<div layout="row">的孩子，当情况不是这样时（它是兄弟姐妹）。

有人可以澄清一下吗？这是一个错误吗？

Answer 1

那取决于这两个div的父节点，当未声明父节点的布局时，它假定它是一行：

<div>
    <div layout="row">
        <div flex>First item in row</div>
        <div flex>Second item in row</div>
    </div>
    <div layout="column">
        <div flex>First item in column</div>
        <div flex>Second item in column</div>
    </div>
</div>

因此，如果您想要不同的行为，则应更改默认布局：

<div layout="column">
    <div layout="row">
        <div flex>First item in row</div>
        <div flex>Second item in row</div>
    </div>
    <div layout="column">
        <div flex>First item in column</div>
        <div flex>Second item in column</div>
    </div>
</div>

角度材质布局行为....兄弟行为问题

1 个答案: