对齐 div 以从具有不同宽度的同一垂直线开始答案

【问题标题】：Align divs to start at the same vertical line with varying widths对齐 div 以从具有不同宽度的同一垂直线开始
【发布时间】：2021-06-27 06:09:30
【问题描述】：

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

我有以下布局：

使用以下简单的 CSS：

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

.label {
  flex: 0.5;
}

.field {
  flex: 1;
}

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

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

我猜这是来自我给标签的flex: 0.5;。我显然可以将该字段的 margin-left 设置为负数，但是当我调整窗口大小时它停止工作。

谢谢！

【问题讨论】：

【解决方案1】：

我认为您需要以 % 之类的响应单位定义标签元素的 flex-basis，因为您打算始终拥有“硬”左边缘。

像这样：

flex: 0 0 20%;

【讨论】：