Javascript 使用带角度2个组件的flexbox

我想更新angular 2应用程序的可视面（网格、颜色）。旧的布局是用bootstrap4构建的，我真的不再需要它了。我决定使用普通的css3，并使用flexbox构建网格

然而，在项目中的实施是困难的，我现在被卡住了。让我们考虑一个例子：

import {Component} from 'angular2/angular2';


@Component({
  selector: 'some-component',
  template: `
    <aside class="col-4 main-aside"></aside>
    <section class="main-section center"></section>
  `
})
export class SomeComponent { }

正如您所看到的，由于它们之间的组件“选择器”，柔性链父级->子级被破坏。我通过添加样式来解决这个问题：

display:flex；宽度：100%到chrome开发工具中的组件选择器，但是我不知道如何从代码的角度实现这一点，也不是最好的方法

我真的很感激任何帮助，因为除了不使用flexbox之外，我不知道如何解决这个问题

我使用的是angular 2.0.0-alpha.44

是的，我知道angular的alpha状态。
我通过向组件添加样式解决了这个问题。例如：

:host {
  display: flex;
}

：主机{}
是关键。
angular团队发布了他们自己的flex布局包，因此您不再需要自己编写：

：主机
选择器解决了这个问题，但您在许多组件中经常使用它

我使用了以下全局CSS：

.row > * {
  display: flex;
  flex-basis: 100%;
}

您是否尝试过将您的
模板
封装在
中？这样，树看起来像
@EricMartinez I不能这样做，因为实际上来自router，所以完整的模板看起来是这样的：某些组件您不能在HTML中的某些内容上指定类？可能只需将类
.container
添加到路由处理程序组件中，并去掉额外的
。要么将路由处理程序子类化，要么像@EricMartinez提到的那样将你的
.container
放在内部模板中，这似乎是完全有效的解决方法。我不敢相信这里的时间安排，我已经为此绞尽脑汁好几天了。你怎么知道的？我希望我能胜过你们的一生。我找到了解决办法。老实说，我想知道是否有人看到过这篇文章。我很高兴它帮助了你。我也关注了一段时间，谢谢@eggy它是否与“普通”角形核心一起工作，还是我必须包含其他内容？我试过了，但没有成功。页面的静态草图可以满足我的要求，但一旦我打开角度，一切都会中断。
.row > * {
  display: flex;
  flex-basis: 100%;
}