Javascript 使CSS FlexBox采用固定列宽

我希望下面的表单具有固定的宽度，当用户单击输入框时，此输入框应展开，其他输入框应收缩，但表单的总列宽应始终保持不变

同样的行为，如果用户单击其他输入框

CSS和Flexbox是否可能实现这一点，或者需要一些Javascript

以下是一个示例和一个片段，其中包含和示例：

#测试表单{
填充：0；
显示器：flex；
最大宽度：600px；
}
#输入1{
背景：红色；
过渡：所有。5s轻松；
}
#输入2{
背景：蓝色；
过渡：所有。5s轻松；
}
#输入1：焦点{
flex:1自动；
}
#输入2：焦点{
flex:1自动；
}

---

您可以将两个

输入

元素

flex:1

用于填充父级

宽度

，并在

上：聚焦

使其

flex:2

或任何您想要的内容：

#测试表单{
填充：0；
显示器：flex；
最大宽度：600px；
}
#输入1{
背景：红色；
}
#输入2{
背景：蓝色；
}
#输入1，
#输入2{
弹性：1；
过渡：所有。5s轻松；
}
#输入1：焦点，
#输入2：焦点{
弹性：2；
}

---

只需增加聚焦输入的灵活性即可

#测试表单{
填充：0；
显示器：flex；
最大宽度：600px；
}
#测试表单输入{
弹性：1；
过渡：所有。5s轻松；
}
#输入1{
背景：红色；
}
#输入2{
背景：蓝色；
}
#testForm输入：焦点{
弹性：3；
}

---

您的表单设置为

max width

而不是

width

有什么原因吗

通过将静态宽度设置为

600px

，并在所有输入中添加

flex grow

规则，它看起来就像您描述的那样工作

请参阅下面的代码片段

#测试表单{
填充：0；
显示器：flex；
宽度：600px；
溢出：隐藏；
}
输入{
弹性：1；
}
#输入1{
背景：红色；
过渡：所有。5s轻松；
}
#输入2{
背景：蓝色；
过渡：所有。5s轻松；
}
#输入1：焦点{
flex:1自动；
}
#输入2：焦点{
flex:1自动；
}

---

是的，但你必须调整一些东西

首先，您必须在表单上设置

宽度

，而不是

最小宽度

，然后将

：焦点

大小设置为所需大小

但是，

input

元素的值为20，必须在HTML中重写该值才能产生真正的效果。

没有设置宽度的输入元素从其

size

属性获取其大小，该属性默认为20

*{
保证金：0；
填充：0；
框大小：边框框；
}
#测试表格{
填充：0；
显示器：flex；
宽度：600px；
边框：1px纯灰；
}
输入{
弹性：1；
最小宽度：0；
保证金：0；
边界：无；
}
#输入1{
背景：红色；
过渡：所有。5s轻松；
}
#输入2{
背景：蓝色；
过渡：所有。5s轻松；
}
#输入1：焦点{
弹性：20；
}
#输入2：焦点{
弹性：20；
}