反応ウィジェットの要素を行単位のフレックスボックスに整列させる

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の2番目の「シーケンス」は反応ウィジェットによって生成されるため、影響はなく簡単には再現できませんそれらをエコーするスパム秒。

ウィジェットは、最初のシーケンスの入力のように、隣り合って配置されていることが想定されていますが、それらはお互いの上に積み重ねられています。

これをCSSで修正することはできますか？

上記のcodepenの例では、コードパッドのcssセクションの上部にreact-widgets less-codeを含めています。最後に私のカスタムCSSです。

Answer 1

元のコードサンプルには2つの問題があります。 「シーケンス」コンテナ内の「アクション」コンテナの垂直方向のアライメントは、「ライン高さ」を設定することによって達成されました。 line-heightは、 "sequence"クラスから継承した90px高の "rw-multiselect-wrapper" -divも担当します。

フレックスボックスでは、「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