Angular 2 组件标签会破坏布局样式

Question

2 issue plnkrhttp://plnkr.co/edit/uGSGtK6FtiICc1HbYy5i?p=preview

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

由于组件标签，还有其他一些规则。

其他团队提供的样式，它们单独存储，其中一些与media-query有关，所以我不能将 uglyhack 与:host { margin-left: auto; }一起使用。此外，某些样式(flex-grow例如(具有数值，并且无法在实际样式更改时轻松跟踪和更改。

如何在不编写特定角度样式的情况下解决此问题？

Answer 1

margin-left不会向右移动user。 如果你想让它在那里，那么使用一个样式

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

如果在元素上使用样式flex <flex-item>布局将起作用。是的，angular 在容器内创建了这个元素，它应该是父div的第一个子元素。