在 flex 列中並排對齊 2 個項目

Question

我對 flex 很陌生。 但到目前為止我很喜歡它。 我的問題是，當父項具有flex-direction: column;時，如何並排對齊兩個項目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 with row direction 並在輸入上設置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>

Answer 2

只需將它們放入容器中並改變方向即可。

 #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; } /*Just place them in a container and change direction*/ #button_container{ display:flex; } 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; text-transform: uppercase; }

 <div class="form2"> <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"> <!--Just place them in a container and change direction --> <div id="button_container"> <a href="./manage.html" class="cancelLink">Cancel</a> <button type="submit " class="updateButton">Reactivate</button> <div> </form> </div>

Answer 3

使用現有標記，使用flex-direction: column ，您不能讓這兩個“按鈕”並排對齊。

一種方法是更改​​為row wrap並使所有input + label寬度為 100%，這可以使用width: 100% （下面使用）或flex-basis: 100% 。

100% 寬的項目將垂直堆疊，其余的水平堆疊（除非它們的總寬度不超過 100%）

堆棧片段

 form { display: flex; flex-wrap: wrap; } label { text-align: center; width: 100%; } input { border-style: solid; border-color: black; color: black; font-size: 16px; padding: 10px 14px; text-align: left; margin: 4px 2px; width: 100%; } a, button { border: none; color: white; background-color: blue; padding: 12px 16px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; }

 <div class="form2"> <div class="message"></div> <form id="updateUserForm" action="https://api.ghjobssubscribe.com/manage/update" 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">Submit</button> </form> </div>