Angular 2组件标签打破了布局样式

Question

2个问题plnkr http://plnkr.co/edit/uGSGtK6FtiICc1HbYy5i?p=preview

1. margin-left休息
2. flex-grow休息

以及其他一些规则也是由于组件标签。

其他团队提供的样式，它们分开存储，其中一些与media-query相关，所以我不能在:host { margin-left: auto; }使用uglyhack。此外，一些样式（flex-grow e.x.）具有数值，在实际样式更改时无法轻松跟踪和更改。

如果不编写特定于角度的样式，如何解决这个问题？

Answer 1

margin-left并未将user移至右侧。如果你想要它，那么使用一种风格

.header-user {
   position: absolute;
   right: 16px;
   ...
}

如果您在flex元素上使用样式，则

<flex-item>布局有效。是的，angular在容器内创建了这个元素，该元素应该是父div的第一个子元素。