Question

我正在为纯HTML5及其中的客户构建一个Web应用程序的前端。 CSS3和使用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;
}

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

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

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

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

我发现此处描述的类似问题：Using flexbox with angular 2 components

不幸的是，我没有使用Angular的经验，也不知道如何从这个问题中实现解决方案。

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

稍后编辑：

我在许多具有不同css属性的地方使用flexbox，并且事先不知道会插入哪些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/

Angular2组件标签会破坏flexbox布局

1 个答案: