在 flex 列中并排对齐 2 个项目

Question

我对 flex 很陌生。但到目前为止我很喜欢它。我的问题是，当父母有 时，我如何并排对齐两个项目flex-direction: column;？

我已将我的 HTML 和 Sass 代码以及屏幕截图粘贴到此处。

我有一个这样的表格：

// manage.html
<div class="form2" hidden>
  <div class="message" hidden></div>
  <form id="updateUserForm" action="https://someaction.com" method="POST">
    <label class="userInfo"></label>
    <input type="text" name="userFirstName" class="userFirstName" placeholder="First Name">
    <input type="text" name="userLastName" class="userLastName" placeholder="Last Name">
    <input type="text" name="subTag" class="subTag" placeholder="Title, benefits, companies, expertise">
    <input type="text" name="subLocation" class="subLocation" placeholder="City, state, zipe code or country">
    <a href="./manage.html" class="cancelLink">Cancel</a>
    <button type="submit " class="updateButton"></button>
  </form>
</div>

样式如下：

// style.scss
.form2 {
    #updateUserForm {
        display: flex;
        flex-direction: column;
    }
    label {
        text-align: center;
    }
    input {
        border-style: solid;
        border-color: $black;
        color: $black;
        font-size: 16px;
        padding: 10px 14px;
        text-align: left;
        margin: 4px 2px;
    }
    input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    input:focus:-moz-placeholder {
        color: transparent;
    }
    input:focus::-moz-placeholder {
        color: transparent;
    }
    input:focus:-ms-input-placeholder {
        color: transparent;
    }
    a,
    button {
        border: none;
        color: $white;
        background-color: $blue;
        padding: 12px 16px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        margin: 4px 2px;
        display: inline-block;
        align-self: flex-start;
        cursor: pointer;
    }
}

这是输出：

我想并排对齐“取消”链接和“重新激活”按钮。我尝试了以下方法：

// style.scss
a {
  align-self: flex-start;
}
button {
  align-self: flex-end;
}

这只会将元素分别向左和向右滑动，而不是在同一行上。这是我希望得到的输出：

关于如何达到我的预期输出的任何建议？

Answer 1

您可以仅使用flex-wrap: wrap方向row并设置flex: 0 0 100%输入。

form {
  display: flex;
  flex-wrap: wrap;
}
input {
  flex: 0 0 100%;
}

<div class="form2">
  <div class="message"></div>
  <form id="updateUserForm">
    <label class="userInfo"></label>
    <input type="text" name="userFirstName" class="userFirstName" placeholder="First Name">
    <input type="text" name="userLastName" class="userLastName" placeholder="Last Name">
    <input type="text" name="subTag" class="subTag" placeholder="Title, benefits, companies, expertise">
    <input type="text" name="subLocation" class="subLocation" placeholder="City, state, zipe code or country">
    <a href="./manage.html" class="cancelLink">Cancel</a>
    <button type="submit " class="updateButton">Lorem</button>
  </form>
</div>