Angular2组件标签破坏了flexbox布局

Question

Angular2组件标签破坏了flexbox布局

6

我正在用纯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项目，破坏了一切。客户说"这些Angular标签被浏览器忽略了"，但这显然在这里不是这种情况。

他还说:"我无法完全控制插入的额外标签。因此设计/CSS必须能够应对额外的非HTML元素(通常由浏览器忽略)。"

我试图为这些新的Angular标签应用内联样式(基本上是从div中添加样式)，并解决了问题，但显然这不是一个很好的解决方案，也不可扩展。

我在这里找到了类似的问题：Using flexbox with angular 2 components 不幸的是，我对Angular没有任何经验，也不知道如何实现这个问题的解决方案。

因此，有可能只通过CSS/HTML修复这个问题吗？

后续编辑：

我在许多地方使用了不同的CSS属性的flexbox，并且事先不知道将插入哪些Angular标记以及它们的位置，因此在CSS中重新设计它们似乎不是一个好的解决方案...

- Alex

问题在于添加这些额外的标签会阻止您的 .child 元素成为 flex-items，因为现在的 angular 标签是 flex-items。您的子元素现在是孙子元素。您可以使用 css 选择器将您的新 angular 标签转换为 flex 容器。像 .wrapper > *{} 这样的东西，但我不是这方面的专家。演示，可能有更好的解决方案。 - Ricky Ruiz

@RicardoRuiz，感谢您的建议！这是一个好主意，并且对于这种特定情况有效，但如果有许多这样的标签插入到不同的位置，不仅在“.wrapper”下，而且不总是作为flex项，那么您的解决方案将无法帮助... - Alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eggy · Accepted Answer

你的组件必须成为 flex 父元素，所以你可以在组件装饰器中使用 styles/stylesUrl 属性，或者直接在 CSS 中为你的组件设置样式。

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

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

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