我正在尝试在带有 span 标签的 div 上绘制一组大小相等的颜色框。我已经使用 display: flex 在父级上实现相同的效果。
<div style="width: 90%; height: 30px; border: blue solid 1px;">
<div style="display: flex; height:100%;">
<!-- ng-repeat to generate random colors array of large size -->
<span style="flex:1;" ng-repeat="healthValue in $ctrl.colors track by $index" ng-style="{'background-color': healthValue}">
</span>
</div>
</div>
这是一个运行示例的 stackblitz 链接: https://stackblitz.com/edit/flex-large-sizes-issue
但是,我注意到当子元素数量增加时,flex 似乎打破了子元素的宽度。我认为这是因为它在某个点之后对子宽度计算进行了四舍五入。有人可以帮助我克服这个问题。
最佳答案
您将每个 span
设置为 width: 100%
。我假设这意味着 100% 的容器,因为子项的百分比大小基于父项大小。
那么你要找的是 flex-shrink: 0
on the spans。
Flex 元素默认设置为 flex-shrink: 1
。这允许它们减小尺寸以避免溢出容器。
关于javascript - CSS Flexbox - 当容器有更多 child 时宽度中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52719308/