为什么改变弯曲方向会改变孩子的身高？

Question

我正在尝试使用 Flexbox 进行媒体查询以在另一个下方显示输入，而不是在您这边。如您所见，使用我当前的代码，我得到了这个：

但是，如果我将 更改flex-direction为column，则输入宽度不是原始宽度。这是结果：

这是我的 HTML：

<div id="mc_embed_signup">
  <form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&amp;id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <label for="mce-EMAIL">No te pierdas ningún artículo</label>
      <div class="mc-wrapper">
        <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Correo electrónico" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
          <input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value="">
        </div>
        <div>
          <input type="submit" value="Suscríbete" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
      </div>
      <div class="mc-error">
      </div>
    </div>
  </form>
</div>

这是我的 CSS：

#mc_embed_signup {
  label {
    font-size: 2em;
    font-weight: bold;
    display: block;
    text-align: center;
  }
  .mc-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px 0px 0px;
  }
  #mce-EMAIL {
    width: 100%;
    margin: 0px 30px 0px 0px;
    border: 2px solid $medium-grey;
    border-radius: 4px;
    text-indent: 20px;
  }
  .button {
    margin: 0px auto;
    cursor: pointer;
  }
}

为什么会这样？

注意：我无法提供 Fiddle，因为这是与 MailChip 的集成，因此它调用了一个 JS 脚本并且它在 Fiddle 上无法正常工作，我不知道为什么......但该脚本没有添加任何额外的类，只有上面的。

Answer 1

flex-direction: row具有（默认值）的 Flex 父级的 Flex 子display: flex级将具有相同的高度。因此，由于您的左侧input是 的直接子项.mc-wrapper，因此它的高度将等于它旁边的项目的高度，这将导致 的input高度增长，因为右侧的 Flex 子项更高。

当您切换到 a 时，flex-direction: column您不再有连续的相邻子项，并且 Flexbox 不会尝试匹配高度，因此自然input会是任何高度。