Question

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

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

CSS和Flexbox是否可以使用，或者需要一些Javascript？

以下是fiddle以及带有示例的代码段：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以同时提供input 元素 flex: 1，以填充父级 width和: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>

Answer 2

只需增加焦点输入的弹性

＆＃13;

#testForm{
  padding: 0;
  display: flex;
  max-width: 600px;
}

#testForm input{
   flex: 1;
   transition: all .5s ease;
}

#input1{
  background: red;
}

#input2{
  background: blue;
}

#testForm input:focus{
  flex: 3;
}

＆＃13;

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

＆＃13;

Answer 3

但是你必须调整一些东西。

首先，您必须在表单上设置width而不是min-width，然后将:focus大小设置为所需的大小。

但是，input元素的minimum size为20，必须在HTML中重写才能使效果真正起作用。

没有设置宽度的输入元素从其size属性获取其大小，默认为20。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#testForm {
  padding: 0;
  display: flex;
  width: 600px;
  border: 1px solid grey;
}

input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: none;
}

#input1 {
  background: red;
  transition: all .5s ease;
}

#input2 {
  background: blue;
  transition: all .5s ease;
}

#input1:focus {
  flex: 20;
}

#input2:focus {
  flex: 20;
}

＆＃13;

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

＆＃13;

Answer 4

是否有理由将您的表单设置为max-width而不仅仅是width？

通过将静态宽度设置为600px并向所有输入添加flex-grow规则，它似乎正如您所描述的那样工作。

请参阅下面的代码段。

#testForm {
  padding: 0;
  display: flex;
  width: 600px;
  overflow: hidden;
}

input {
 flex: 1;
}

#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>

使CSS FlexBox采用固定的列宽

4 个答案: