[英]Align 2 items side-by-side in a flex column
I am very new to flex.我对 flex 很陌生。 But I'm loving it so far.但到目前为止我很喜欢它。 The question I have is, how do I align two items side-by-side when the parent has flex-direction: column;
我的问题是,当父项具有flex-direction: column;
时,如何并排对齐两个项目flex-direction: column;
? ?
I have pasted my HTML and Sass code here along with screenshots.我已将我的 HTML 和 Sass 代码以及屏幕截图粘贴到此处。
I have a form like so:我有一个这样的表格:
// 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>
That is styled like so:样式如下:
// 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;
}
}
Here is the output:这是输出:
I would like to align 'Cancel' link and 'Reactivate' button side by side.我想并排对齐“取消”链接和“重新激活”按钮。 I tried the following:我尝试了以下方法:
// style.scss
a {
align-self: flex-start;
}
button {
align-self: flex-end;
}
This only slides the elements to left and right respectively without being on the same line.这只会将元素分别向左和向右滑动,而不是在同一行上。 Here is the output I wish to get:这是我希望得到的输出:
Any suggestions on how to reach my expected output?关于如何达到我的预期输出的任何建议?
You can just use flex-wrap: wrap
with row
direction and set flex: 0 0 100%
on inputs.您可以只使用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>
Just place them in a container and change direction.只需将它们放入容器中并改变方向即可。
#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>
With the existing markup, using flex-direction: column
, you can't make those two "buttons" align side-by-side.使用现有标记,使用flex-direction: column
,您不能让这两个“按钮”并排对齐。
One way is to change to row wrap
and make all the input
+ label
100% width, which can be done with either width: 100%
(used below) or flex-basis: 100%
.一种方法是更改为row wrap
并使所有input
+ label
宽度为 100%,这可以使用width: 100%
(下面使用)或flex-basis: 100%
。
With that the items being 100% wide will stack vertical and the rest horizontal (unless their total width doesn't exceed 100%) 100% 宽的项目将垂直堆叠,其余的水平堆叠(除非它们的总宽度不超过 100%)
Stack snippet堆栈片段
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.