CSS：无法弯曲长出时NG-重复

Question

我有这样的代码，使用Flex列表行为不同，虽然从同一项目组成的2个例子：

2 examples

`<ul class="flex-container"> 
    <div ng-repeat="item in items"> 
     <li class="flex-item">{{item}}</li> 
    </div> 
</ul>` 


`<ul class="flex-container"> 
    <li class="flex-item">item1</li> 
    <li class="flex-item">item2item2</li> 
    <li class="flex-item">item3item3</li> 
    <li class="flex-item">item4</li> 
</ul>` 


`.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around;} 
.flex-item { 
    border: 2px solid white; 
    color: white; 
    flex-grow: 1; 
    margin:5px; 
    font-size:30px;}` 

是有办法我可以使第一个列表像第二个一样行事，即使它是通过ng-repeat填充的？非常感谢！

Answer 1

flex-item类别包含flex-grow: 1;，并且因为它位于li，而li不是flexbox的直接子元素，所以它将被忽略。另外，ul元素直销小孩应该是li元素。

从第一列表标记删除div，并且移动ngRepeat语句来li：

<ul class="flex-container"> 
    <li class="flex-item" ng-repeat="item in items">{{item}}</li> 
</ul>