angular - 你如何让两个使用 flex 的表单字段占据行的 33%？

Question

我有一个表单，它有三列。

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

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

这对于一个表单字段来说很简单，因为您添加: flex=33

对于 2 个字段，您不能添加 flex=16.5。 16 太宽，15 太细

使用 flex 让两个表单字段占据 View 的三分之一的技术是什么？

<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 实际上来自 CSS 框架，小数点之间没有 flex 类，例如16.5%。

我可以添加一个自定义类，使用以下规则覆盖 flex-16:

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

Answer 1

当您设置 flex=X 时，您实际上是在设置 flex-grow 属性。这决定了 flexbox 应该如何分配任何可用空间。在您的例子中，您根本不希望它们增长，而是恰好 33%。

为此，您可以设置 flex-basis 属性。这定义了元素在计算可用空间之前应占用多少空间。

.container {
  height: 100px;
  background: red;
  display: flex;
}

.item1 {
  flex-basis: 33%;
  background: green;
}

.item2 {
  flex-basis: 33%;
  background: blue;
}

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
</div>