一个弹性项目的填充影响其余弹性项目[重复]答案

【问题标题】：Padding of one flex item influence the rest of flex items [duplicate]一个弹性项目的填充影响其余弹性项目[重复]
【发布时间】：2019-05-03 23:28:36
【问题描述】：

我有一个带有 2 个输入的 flex 父级。一个 email 输入和一个 submit 输入。

在email 输入上，我设置了一些填充来移动placeholder 文本。这样，email 输入高度将会增长（我所期望的），但问题是submit 输入高度也会成长。

为什么会发生这种情况，我该如何阻止它？我希望submit 输入的高度小于email 输入。

HTML：

<div class="footer__form">
        <input type="email" class="footer__form--email" placeholder="enter your email for updates">
        <input type="submit" class="footer__form--submit u-uppercase-text" value="sign up">
</div>

CSS：

 &__form {
    flex-basis: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;

     &--email {
      flex: 0 0 65%;
      padding: 1.5rem 1.5rem;
      }

    &--submit {
      flex: 0 0 30%;
    }
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我已添加align-items:center;。因为，默认align-items: 是stretch

.footer__form {
    flex-basis: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items:center;
}
     .footer__form--email {
      flex: 0 0 65%;
      padding: 1.5rem 1.5rem;
      }

    .footer__form--email--submit {
      flex: 0 0 30%;
      font-weight: 700;

    }

<div class="footer__form">
        <input type="email" class="footer__form--email" placeholder="enter your email for updates">
        <input type="submit" class="footer__form--submit u-uppercase-text" value="sign up">
</div>

【讨论】：