让 react-widgets 的元素在 row-wise flexbox 中对齐

Question

我在将 react-widgets（下拉列表和多选）与我的样式集成时遇到了问题，就像我以前使用的输入字段一样。

它应该是这样的：

随着白色矩形蜂鸣反应小部件 Dropdownlists 分别 Multiselect.

这是一个代码笔示例，第二个蓝色块包含 react-widget 的标记：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>

第二个"sequence"中的action-div里面的标记是由react-widget生成的，所以我没有影响也可以'不要轻易用 spans.

替换它们

小部件应该像第一个序列中的输入一样彼此相邻对齐，但它们彼此堆叠在一起。

是否可以使用 css 解决此问题？

在上面的codepen-example中，我在codepen的css部分的上部包含了react-widgets less-code，最后是我的自定义css.

Answer 1

原始代码示例存在两个问题。 "action"-容器在"sequence"-容器内的垂直对齐是通过设置"line-height"实现的。 line-height 也负责 90px-high "rw-multiselect-wrapper"-div，它继承自 "sequence"-class.

Flexbox 允许使用 "align-self"-属性的子项进行自我对齐。

将 "align-self" 添加到 class 并将每个 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>

代码笔示例：http://codepen.io/peletiah/pen/ozjNpW

让 react-widgets 的元素在 row-wise flexbox 中对齐

Getting react-widgets' elements to align in row-wise flexbox

css

styling

flexbox

reactjs