Question

我有这个代码，有两个flex列表的例子表现不同，虽然由相同的项目组成：

`<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>

css：ng-repeat时无法灵活增长

1 个答案: