Angular 如何使用flex创建占行33%的两个表单字段？

我有一个表单，它有三列

我正在使用flex为每个表单元素实现动态宽度

我遇到了一个问题，我有两个表单字段，它们应该适合视图的1/3。

这对于一个表单字段来说很简单，因为您添加了：

flex=33

使用2个字段，无法添加

flex=16.5

。对于

16

来说，它太宽了，

15

太薄了。

使用

flex

让两个表单字段占据视图三分之一的技术是什么？

<div class="flex-100">
  <div class="flex-16">CONTENT</div>
  <div class="flex-16">CONTENT</div>
</div>

.flex-100 {
    flex-wrap: wrap;
    flex-direction: row;
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.flex-16 {
    flex: 1 1 16%;
    max-width: 16%;
    max-height: 100%;
    box-sizing: border-box;
}

---

设置

flex=X

时，实际上是在设置

flex-grow

属性。这控制flexbox如何分配任何可用空间。在您的例子中，您根本不希望它们增长，而是希望它们精确地增长33%

为此，可以设置

flex basis

属性。这定义了在计算可用空间之前项目应占用的空间量

.container{
高度：100px；
背景：红色；
显示器：flex；
}
.项目1{
弹性基准：33%；
背景：绿色；
}
.项目2{
弹性基准：33%；
背景：蓝色；
}

如果每个孩子的大小相同，请使用flex:1；另外，提供HTML和CSS以获得有效的帮助。如果这与您的代码相似，您也可以使用boostrap，它使用了16.66666 7%的正确值

flex: 1 1 16.5%;
max-width: 16.5%;