Question

I m 为纯超5 &的客户建立网络前端;CSS3,并使用软箱进行布局。我完成了第1页,并将其发送给客户。他总结了安戈2部分标记的一些代码,布局也打破。

问题的一个例子是:

原始布局:

传真:

<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;
}

He wrapped first and second child divs in Angular2 component tags and got this: https://jsfiddle.net/starbreaker/1c15q243/

我理解所发生的情况——这些新增加的安戈罗特2 标签变成了弹性项目,而不是原始标签,并破坏了一切。客户说,“这些信标被浏览器忽略”,但显然不是这种情况。

他还说,“我没有完全控制外加的东西。因此,设计/设计必须能够应对非html因素(浏览器通常只忽略)

我试图对这些新的安热门帽采用线式(主要是从小块中添加风格),并解决问题,但显然这不是一个非常好的解决方案,也不是可以想象的。

我在此发现类似的问题:Using flex Box with angular 2lement

不幸的是,我对安热有零的经验,对如何落实这一问题的解决办法没有任何想法。

因此,能否只在CSS/超文本中确定这一点?

<>Later Edit>:

我在许多具有不同特性的地方使用弹性箱,事先不知道将插入哪块安热帽,在什么地方,中央安全局似乎都把它们归为一种好的解决办法。

Answer 1

您的成分必须是弹性的母体,因此,你们要么使用/code>/。 Url Property in composition decorator, or only set way for their composition in css



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

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

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

Answer 2

https://caniuse.com/css-display-contents 。

友情链接