带有AngularJS 1.5组件的Flexbox

我有使用

ng repeat

创建的组件，我希望它们是flex子级：

其中，我的组件的模板是：

<div class="c">
    ...
</div>

...

这是一种工作方式，但是

my组件

项的高度并不都与如果它们只是

div

s时的高度相同

我可以通过设置

.c{height:100%}

来解决这个问题，但它会弄乱包装

我能用AngularJS 1.5实现这种行为吗

附加的复制代码笔：

---

谢谢

问题在于，在使用组件时，有一个新元素包装了

div.c

元素，因此flex行为不会绑定css的两个元素。您的示例（来自plunkr）没有组件，因为它没有

my组件

div.flex-container
    my-component // <- this guy is breaking off the flex connection
        div.c

而且：

<gallery>
    <gallery-item ng-repeat="photo in photos">
        <photo img="photo "></photo>
    </gallery-item>
</galery>

很漂亮，不是吗{D

---

谢谢！的确，添加包装器组件是有效的（如下所示：），但为什么不能用当前的DOM元素实现这一点？@bomba6因为组件的标记没有被其模板替换，它将其内容包装在其标记中，并且由于该元素不是flex，它中断了与包装器以及flex项的关系。基本上，您有

flex-block-flex

和block br是的，我在上面的评论中附加的代码笔是我用包装器组件实现的。我不确定仅仅为了修复而添加组件是解决方案（我已经有了一个

my components

，它呈现一些东西，然后使用ng repeat呈现

my component

）。我正在尝试在不添加任何其他组件的情况下解决此问题。@bomba6如何设置

我的组件的样式

？或者像

my component class=“c”

那样将类添加到组件中？只需使组件具有灵活性。

<gallery>
    <gallery-item ng-repeat="photo in photos">
        <photo img="photo "></photo>
    </gallery-item>
</galery>