양식의 CSS 플렉스 박스

Question

두 개의 텍스트 필드가 나란히 있고 자동으로 공간을 채우기 위해 웹 폼에서 플렉스 디스플레이 속성을 사용하고 싶습니다. 나는 테이블 레이아웃 위에 flex를 사용하기로 결정했다. 왜냐하면 윈도우가 축소되었을 때 그들 자신의 라인으로 옮기길 바랬 기 때문이다.

나는 flexbox 사용법을 오해하고 있다고 생각합니다.

아래는 지금까지의 작업입니다 (여기에 게시하기 위해 단순화되었습니다). 나는 플렉스 부모로서 fieldset을 사용하고 있으며, "성장"해야 할 각 양식 요소는 div에 쌌다 (같은 줄에있을 수 있도록 display: inline로 설정). 필드 집합에 대한 전설도 있는데, display:block 및 width:100%으로 설정되어 자체 줄에 표시됩니다.

당신이 볼 수 있듯이

fieldset { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    border: none; 
 
} 
 

 
label { 
 
    display: none; 
 
} 
 

 
legend { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
fieldset > div { 
 
    display: inline; 
 
    flex: 1 1 auto; 
 
} 
 

 
input { 
 
    width: 100%; 
 
}

<form> 
 
    <fieldset> 
 
     <legend>These are Text Fields</legend> 
 
     <div> 
 
      <input type="text" id="text1"> 
 
      <label for="text1">Text Field</label> 
 
     </div> 
 
     <div> 
 
      <input type="text" id="text2"> 
 
      <label for="text2">More Text</label> 
 
     </div> 
 
    </fieldset> 
 
</form>

jsFiddle link , div의 자신의 행에 각이합니다 (display: inline 및 인 flexbox 물건에도 불구하고). div 요소에 테두리를 추가하면 해당 요소가 현재 100 % 너비임을 알 수 있습니다. 하지만 너비를 수동으로 정의하더라도 (30 %와 같이), 그것들은 자신의 줄에 남아 있습니다.

div를 나란히 표시하고 부모의 너비를 채우도록 크기를 조절하려면 어떻게해야합니까? 여기

Answer 1

두 가지 :

1) 요소에 display: flex을 수행 할 때, 매일 직접 아이가 영향을받습니다. 그래서 당신의 예 (만약 작동한다면)는 범례가 같은 줄에 표시 될 것입니다.

2) 이유가 무엇이든간에 fieldset은 (는) flexbox와 잘 어울리지 않습니다. 어쨌든 전설이 같은 줄에 있기를 원하지 않기 때문에, 당신이 원하는 줄을 같은 줄에 배치하는 것이 좋습니다.

<form> 
    <fieldset> 
     <legend>These are Text Fields</legend> 
     <div class="flex-wrapper"> 
      <div> 
       <input type="text" id="text1"> 
       <label for="text1">Text Field</label> 
      </div> 
      <div> 
       <input type="text" id="text2"> 
       <label for="text2">More Text</label> 
      </div> 
     </div> 
    </fieldset> 
</form> 


fieldset { 
    border: none; 
} 

.flex-wrapper { 

    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: stretch; 
} 

.flex-wrapper > div { 
    flex: 1 1 auto; 
} 


label { 
    display: none; 
} 

legend { 
    display: block; 
    width: 100%; 
} 

input { 
    width: 100%; 
}