반응 위젯의 요소를 행 방식의 flexbox로 정렬하기

Question

react-widgets (드롭 다운 목록 및 다중 선택)을 이전에 사용한 입력 필드와 동일한 방식으로 내 스타일에 통합하는 데 문제가 있습니다.

은 다음과 같아야합니다

을 흰색 사각형 반응 - 위젯 Dropdownlists 각각 다중 선택을 beeing는 함께. 여기

은 반응 - 위젯의 태그를 함유하는 제 2 청색 블록 더불어 codepen-예제 : http://codepen.io/peletiah/pen/ORLaGr

이 관련 간체 태그이다

.route { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.sequence { 
 
    display: flex; 
 
    height: 90px; 
 
    line-height: 90px; 
 
} 
 

 
.action { 
 
    align-self: center; 
 
    line-height: normal 
 
}

<div class="route"> 
 
    <div class="sequence"> 
 
    <div class="action"> 
 
     <span> 
 
      <input value="set"> 
 
      </span> 
 
     <span> 
 
      <input value="data goes here"> 
 
      </span> 
 
    </div> 
 
    </div> 
 

 
    <div class="sequence"> 
 
    <div class="action"> 
 
     <div class="rw-dropdownlist rw-widget"> 
 
     <div class="rw-input">set</div> 
 
     </div> 
 
     <div class="rw-multiselect rw-widget"> 
 
     <div class="rw-multiselect-wrapper"> 
 
      <input> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

마크 업 액션 -div 두 번째 "시퀀스"는 반응 위젯에 의해 생성되므로 영향이 없기 때문에 쉽게 복제 할 수 없습니다 에코 스팬들.

위젯은 첫 번째 시퀀스의 입력과 같이 서로 나란히 정렬되어야하지만 서로 위에 쌓여 있습니다.

이 문제를 CSS로 해결할 수 있습니까?

위의 codepen-example에서 codepend의 css-section의 상단 부분에 react-widgets less-code을 포함 시켰습니다. 그 다음에는 사용자 정의 CSS가 있습니다.

Answer 1

원래 코드 샘플에는 두 가지 문제가 있습니다. "시퀀스"컨테이너 내부의 "동작"컨테이너의 수직 정렬은 "라인 높이"를 설정하여 수행되었습니다. line-height는 90px 높이의 "rw-multiselect-wrapper"-div도 담당하며 "sequence"클래스에서 상속합니다.

플렉스 박스는 "align-self"속성으로 아이들의 자기 정렬을 허용합니다.

"align-self"를 클래스에 추가하고 각 react-widget-div를 자체 "action"에 배치합니다. -div는 정렬 문제와 높이 문제를 수정합니다.

.route { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.sequence { 
 
    display: flex; 
 
} 
 

 
.action { 
 
    align-self: center; 
 
}

<div class="route"> 
 
    <div class="sequence"> 
 
    <div class="action"> 
 
     <span> 
 
      <input value="set"> 
 
      </span> 
 
    </div> 
 

 
    <div class="action"> 
 
     <span> 
 
      <input value="data goes here"> 
 
      </span> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="sequence"> 
 
    <span class="sequence-order">2</span> 
 

 
    <div class="action"> 
 
     <div class="rw-dropdownlist rw-widget"> 
 
     <div class="rw-input">bridge</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="action"> 
 
     <div class="rw-multiselect rw-widget"> 
 
     <div class="rw-multiselect-wrapper"> 
 
      test 
 
      <input> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Codepen 샘플 : http://codepen.io/peletiah/pen/ozjNpW