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;
  }
}

为什么会这样？

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

Answer 1

具有flex-direction: row（display: flex的默认值）的flex父级的弹性子级将具有相等的高度。因此，由于您的左input是.mc-wrapper的直接子项，因此它的高度将等于其旁边项目的高度，这将导致input＆＃ 39;自从右边的柔韧孩子身高以来，身高增长。

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

Answer 2

添加

dependencies {
  // Enforce the specified version
  implementation(enforcedPlatform("com.fasterxml.jackson:jackson-bom:2.10.4"))

  // Align all modules to the same version, but allow upgrade to a higher version
  implementation(platform("com.fasterxml.jackson:jackson-bom:2.10.4"))
}

这样，高度将保持不变。 flex-flow: wrap;不会影响

Answer 3

重要有一种名为align-items的样式，默认为stretch。这就是根据flex-direction使元素的宽度/高度匹配其父元素的原因。

对于任何来这里的人来说，这可能是有用的：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

您必须仅更改“ align-items”。我有这种 HTML 案例：

<section>
    <hgroup>
        <h1>Our Products</h1>
        <h3>We build all kind of containers</h3>
        <p>Lorem Ipsum is simply dummy text of the printing..</p>
    </hgroup>
    <button class="full-color pull-right">View All Products</button>
</section>

...和 CSS 一样：

section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

现在输入高度与hgroup相同 但是，如果我添加到此部分： align-items: baseline; 输入高度与您预期的一样。您必须避免：

align-items: inherit/unset/stretch/initial/normal

Answer 5

您只需要添加flex-flow：将wrap-reverse添加到flex父级，然后一切就好了：）

示例：

input{
  box-sizing: border-box;
  left:0;
  right:0;
}

祝你好运

为什么改变弯曲方向会改变儿童身高？

5 个答案: