Angular2 组件标签破坏了 flexbox 布局

Question

我正在为纯 HTML5 和 CSS3 中的客户端构建 Web 应用程序的前端，并使用 flexbox 进行布局。我完成了第一页并将其发送给客户。他在 Angular2 组件标签中包装了一些代码，布局就中断了。

下面是问题的一个例子：

原始布局：https : //jsfiddle.net/starbreaker/jrqbhsuq/

HTML：

<div class="wrapper">

  <div class="child first">
    <h1>Some content</h1>
  </div>

  <div class="child second">
    <h1>Some more content</h1>
    <p>Help me if you can, I'm feeling down
       And I do appreciate you being 'round
       Help me get my feet back on the ground
       Won't you please, please help me
    </p>
    <p>When I was younger so much younger than today
       I never needed anybody's help in any way
       (But) But now these days are gone (These days are gone), I'm not so self assured
       (I know I've found) Now I find I've changed my mind and opened up the doors
      </p>
  </div>

</div>

CSS：

.wrapper {
  display: flex;
}

.child {
  background-color: yellow;
  padding: 0 1em;
  flex: 1;
}

.first {
  display: flex;
  align-items: center;
  background-color: #F6CEF5;
}

.second {
  background-color: #CEF6CE;
}

他将第一个和第二个子 div 包裹在 Angular2 组件标签中并得到了这个：https ://jsfiddle.net/starbreaker/1c15q243/

我明白发生了什么——这些新添加的 Angular2 标签变成了 flex-items 而不是原始标签，并破坏了一切。客户端说“浏览器会忽略这些角度标签”，但这里显然不是这种情况。

他还说“我无法完全控制插入哪些额外的标签。因此，设计/css 必须能够处理额外的非 html 元素（浏览器通常会忽略这些元素）。”

我尝试将内联样式应用于这些新的 Angular 标签（基本上是将样式从 div 添加到它们）并且它解决了问题，但这显然不是一个很好的解决方案并且不可扩展。

我发现这里描述了类似的问题：Using flexbox with angular 2 components

不幸的是，我对 Angular 的经验为零，也不知道如何从这个问题中实现解决方案。

那么，是否有可能仅在 CSS/HTML 中以某种方式解决这个问题？

后来编辑：

我在许多地方使用了 flexbox 并具有不同的 css 属性，并且事先不知道将插入什么 Angular 标签以及在哪里，所以在 CSS 中重新设计它们似乎不是一个好的解决方案......

Answer 1

您的组件必须是 flex 父组件，因此您可以在组件装饰器中使用styles/stylesUrl属性，或者只需在 css 中为您的组件设置样式

// component decorator styles property
:host {
  display: flex;
}

// external css
your-component-selector {
  display: flex;
}

https://jsfiddle.net/1c15q243/2/