Flexbox的与AngularJS 1.5组件

我有ng-repeat创建的组件，我想他们是柔性的孩子：Flexbox的与AngularJS 1.5组件

<div style="display:flex; flex-wrap: wrap"> 
    <div ng-repeat="item in data" style="flex-basis: 30%"> 
     <my-component item="item"></my-component> 
    </div> 
<div>

在哪里我的组件的模板：

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

这是一种工作，但my-component的物品并不都像它们一样高，如果它们只是div s。

我可以通过设置.c{height: 100%}解决此，但它与包装弄乱。

我可以acheive与AngularJS 1.5在所有的这种行为？

连接codepen为摄制：http://codepen.io/anon/pen/ENqvvO

谢谢！

来源

2016-12-29 bomba6

问题是，当使用组件时，你有一个新元素包装div.c元素，以便flex行为不会绑定你的css的两个元素。您的示例（来自plunkr）没有组件，因为它没有中间的my-component。

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

为了解决它，你可以风格，使柔性可直接div.flex-container和my-component之间施加标签my-component，而不是.c。

其实我建议你创建一个容器组件和项目组件，这样的事情是保持清晰，坚实。

例如：

<list> 
    <list-item>Item 1</list-item> 
    <list-item>Item 2</list-item> 
    <list-item>Item 3</list-item> 
    <list-item ng-repeat="item in items"> {{ item }} </list-item> 
</list>

而且也：

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

美丽的，不是吗？：{d

来源

2016-12-29 13:11:23

谢谢！事实上，添加一个包装器组件（像这样：http://codepen.io/anon/pen/pNMdZE），但为什么不能用当前的DOM元素来实现呢？ – bomba6

@ bomba6因为该组件的标签不被它的模板所取代，它会返回他的内容他的标签内，因为该元素是不挠，它打破了与包装，这是柔性以及该项目的关系。 Basicaly你有'flex-block-flex'，这个块会阻止任何事情。 –

@ bomba6你有想过吗？它对你有用吗？ –

Flexbox的与AngularJS 1.5组件

回答

相关问题