javascript - 使 CSS FlexBox 采用固定列宽

Question

我希望下面的表单有一个固定的宽度，当用户点击输入框时，这个输入框应该展开，其他输入框应该缩小，但表单的总列宽应该始终保持不变。

相同的行为，如果用户点击其他输入框。

这是否可以通过 CSS 和 Flexbox 或一些 Javascript 实现？

这是一个fiddle以及带有示例的代码段:

#testForm {
  padding: 0;
  display: flex;
  max-width: 600px;
}

#input1 {
  background: red;
  transition: all .5s ease;
}

#input2 {
  background: blue;
  transition: all .5s ease;
}

#input1:focus {
  flex: 1 1 auto;
}

#input2:focus {
  flex: 1 1 auto;
}

<form id="testForm">
  <input type="text" id="input1">
  <input type="text" id="input2">
</form>

Answer 1

你可以给两个input elements flex: 1 让它们填充父级 宽度 和 :focus 使它们成为 flex: 2 或任何你想要的:

#testForm {
  padding: 0;
  display: flex;
  max-width: 600px;
}

#input1 {
  background: red;
}

#input2 {
  background: blue;
}

#input1,
#input2 {
  flex: 1;
  transition: all .5s ease;
}

#input1:focus,
#input2:focus {
  flex: 2;
}

<form id="testForm">
  <input type="text" id="input1">
  <input type="text" id="input2">
</form>