相关疑难解决方法(0)

使用带有角度2组件的flexbox

我想更新我的角度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 { }

Run Code Online (Sandbox Code Playgroud)

如果我在其中引导此组件,例如.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>

Run Code Online (Sandbox Code Playgroud)

正如您所看到的那样,flex链父 - >子因为它们之间的组件"选择器"而被破坏.我通过添加样式来解决这个问题:display: flex; width: 100%;来自chrome dev工具的组件选择器,但是我不知道如何从代码角度进行这项工作,也不是最好的方法.

我真的很感激任何帮助,因为我不知道如何解决这个问题,除了不使用flexbox.

我正在使用角度2.0.0-alpha.44

是的,我知道角度的alpha状态.

javascript css css3 flexbox angular

Egg*_*ggy

lucky-day

12
推荐指数

1
解决办法

1万
查看次数