对齐 div 以从同一垂直线开始，但宽度不同

Question

我相信有一个简单的方法可以解决这个问题，但我束手无策：

我有以下布局：

用下面的简单CSS：

.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 15px 0px 0px;
}

.label {
  flex: 0.5;
}

.field {
  flex: 1;
}

但是，我希望标签 2 到 4 旁边的字段如下所示：

我怎样才能做到这一点？我想要大约 100px 的最大宽度。如果它设置 max-width: 100px; 我得到这个：

我猜这是来自 flex: 0.5; 我给的标签。我显然可以将字段的 margin-left 设置为负值，但是当我调整 window.

大小时它停止工作

谢谢！

Answer 1

我认为您需要在像 % 这样的响应式单元中定义标签元素的 flex-basis，因为您打算始终有一个“硬”左边缘。

像这样：

flex: 0 0 20%;

Align divs to start at the same vertical line with varying widths