css – 为什么改变弹性方向会改变儿童身高？

2019年7月2日 257次阅读

我正在尝试进行媒体查询,以便使用Flexbox在另一侧下方显示输入.正如您所看到的,使用我当前的代码,我得到了这个：

《css – 为什么改变弹性方向会改变儿童身高？》

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

《css – 为什么改变弹性方向会改变儿童身高？》

这是我的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;
  }
}

为什么会这样？

注意：我不能提供一个小提琴,因为这是与MailChip的集成,所以它调用一个JS脚本,它在Fiddle上不能正常工作,我不知道为什么……但是脚本不会添加任何额外的类,只有上面的那些.

最佳答案 具有flex-direction：flex(display：flex的默认值)的flex父级的flex子级将是相等的高度.因此,由于你的左输入是.mc-wrapper的直接子项,它的高度将等于它旁边项目的高度,这将导致输入的高度增加,因为右边的flex子项更高.

当您切换到flex-direction：列时,您不再有相邻的子节点,并且flexbox不会尝试匹配高度,因此输入将是自然的任何高度.

点赞