Egg*_*ggy 12 javascript css css3 flexbox angular
我想更新我的角度2应用程序的可视化侧(网格,颜色).旧的布局是用bootstrap 4构建的,我不再需要了.我决定使用普通的css3,并使用flexbox构建网格.我在codepen上预览了这个网格.
但是项目中的实施很难,我现在卡住了.我们来看一个例子:
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 { }
如果我在其中引导此组件,例如.container我可能会得到以下结果:
<body>
<!-- .container is flex parent -->
<div class="container">
<some-component>
<!-- .main-aside and .main-section should be flex children -->
<aside class="main-aside"></aside>
<section class="main-section center"></section>
</some-component>
</div>
</body>
正如您所看到的那样,flex链父 - >子因为它们之间的组件"选择器"而被破坏.我通过添加样式来解决这个问题:display: flex; width: 100%;来自chrome dev工具的组件选择器,但是我不知道如何从代码角度进行这项工作,也不是最好的方法.
我真的很感激任何帮助,因为我不知道如何解决这个问题,除了不使用flexbox.
我正在使用角度2.0.0-alpha.44
是的,我知道角度的alpha状态.
Egg*_*ggy 34
我通过向组件添加样式来解决此问题.例如:
:host {
display: flex;
}
:host {} 是关键.