正确的方式提供组件大小？

Question

假设我有一个child-component，我想要占据parent-component宽度的70％。

CSS的正确方法/最佳实践是什么，为什么？

parent-component中的

：

<child-component class="give-child-width"></child-component>

或者

child-component中的

：

<div class="my-width">
    ....
</div>

提前感谢任何见解！

任何其他有解释的选项都将非常感谢

Answer 1

我发现的最好方法是将插座包在相关位置，然后将插座设为100％。

<强> parent.component.html

<div class="width-70-percent">
  <child-component class="width-100-percent"></child-component>
</div>

Angular呈现出口的方式是动态的，如果直接将子组件内的宽度设置为相对于父组件的某些内容，则会出现这种情况。为了确保孩子始终正确呈现，您需要设置出口周围的相对尺寸，出口处的全宽（然后有时需要孩子的整个宽度）。它可能看起来多余，但它是我遇到过的唯一经证实的方法。

此外，我强烈建议您查看@angular/flex-layout。虽然它仍在进行中，但是Angular团队已经大力支持它，并且可能会继续确保它作为Angular未来的布局框架。

Flex布局示例：

<div fxLayout="row">
    <div fxFlex="70"><child-component fxFlexFill></child-component></div>
</div>