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組件

回答

相關問題