在弹性列

Question

我很新兴。但到目前为止我很喜欢它。我的问题是，当父母有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>

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%（在下面使用）或{ {1}}。

随着100％宽的物品将垂直堆叠而其余物品呈水平（除非它们的总宽度不超过100％）

Stack snippet

flex-basis: 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;
}