CSS FlexBox의 고정 열 너비 만들기

Question

아래 양식에 고정 너비가 있어야하며 사용자가 입력 상자를 클릭하면이 입력 상자가 확장되고 다른 입력란은 축소되어야하지만 전체 입력란 너비는 양식은 항상 일정해야합니다.

사용자가 다른 입력 상자를 클릭하는 경우와 동일한 동작입니다.

CSS와 Flexbox에서 가능합니까 아니면 일부 자바 스크립트가 필요합니까?

#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

때문이다하지만 당신은 몇 가지를 조정할 수 있습니다.

먼저, width을 min-width이 아닌 양식에 설정하고 :focus 크기를 필요한 것으로 설정해야합니다.

그러나 의 요소는 실제 효과를 위해 HTML에서 재정의되어야하는 20 개입니다.

설정된 폭없이 입력 요소는 디폴트 20

* { 
 
    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; 
 
}

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

그것 size 속성에서 크기를 얻을

Answer 2

당신은 모두 input 요소에게 그들 부모 width를 채울 수 있도록 flex: 1을주고 초점 그들에게 flex: 2 또는 무엇이든을 할 수 있습니다 : 여기

는 fiddle하고있는 조각과 예입니다 원하는 :

#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 3

는 포커스 입력

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

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

Answer 4

양식은 단순히 width 이상 max-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>