フレックスカラムに2つのアイテムを並べて並べる

Question

フレックスにはとても新しいものです。しかし、私はこれまでこれを愛しています。私が持っている質問は、親がflex-direction: column;を持っているときにどのように2つのアイテムを並べて整列させるのですか？

ここでは、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>

Answer 2

row wrapに変更し、すべてのinput + label 100％の幅 `行wrap`に

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: calc(100% - 4px - 28px); 
 
    } 
 
    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; 
 
    }

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