html - css:在 ng-repeat 时无法 flex-grow

Question

我有这段代码，其中有 2 个 flex 列表示例，尽管它们由相同的元素组成，但表现不同:

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>