我创建了一个表单，其中一些文本元素垂直对齐，如下所示：
它们使用 Flexbox 在页面上水平和垂直居中：
.my-class {
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
我现在要做的就是保持这种对齐方式（即将页面上的所有内容都保持在原来的位置），同时在第一个文本框的两侧添加一些元素。我尝试将所有东西都包裹在一个div但由于文本框两侧的元素宽度不同，因此文本框会失去对齐方式：
正如您所看到的，长文本框现在没有对齐。如何在第一个文本框之前和之后添加元素而不移动它的位置？
假设它是网址/密码/按钮那些是要居中的，而https/路径粘在每一侧，我会这样做，我使用柔性row容器和伪元素将每组项目分成自己的行。
通过此标记，人们还可以完全控制根据屏幕宽度等在项目周围移动。
使这项工作有效的两个主要因素是伪元素，它们以其全宽迫使它们进入自己的行，同时将内容与order属性，能够将它们放置在pass and auth分别。
堆栈片段
.flex {
display: flex;
flex-flow: row wrap;
justify-content: center; /* horiz. center items */
align-content: center; /* vert. center wrapped items */
/*align-items: center;*/ /* vert. center unwrapped items */
}
.flex div:nth-child(1),
.flex div:nth-child(3) { /* https/path item */
flex: 1; /* share space left equal */
}
.flex div:nth-child(2),
.flex div:nth-child(4) { /* url/pass item */
flex-basis: 300px; /* need equal width */
}
.flex::before { /* 1st line breaker */
content: ''; width: 100%;
order: 1;
}
.flex div:nth-child(4) {
order: 2;
}
.flex::after { /* 2nd line breaker */
content: ''; width: 100%;
order: 3;
}
.flex div:nth-child(5) {
order: 4;
}
/* styling */
.flex {
height: 200px;
border: 1px solid red;
}
.flex span {
display: inline-block;
border: 1px solid gray;
padding: 2px;
margin: 2px;
}
.flex div:nth-child(2) span,
.flex div:nth-child(4) span {
width: calc(100% - 10px);
}
.flex div:nth-child(1) {
text-align: right;
}
<div class="flex">
<div><span>http(s)</span></div>
<div><span>url</span></div>
<div><span>path</span></div>
<div><span>***</span></div>
<div><span>authenticate</span></div>
</div>
如果宽度url/pass应随父级宽度缩放，结合使用百分比和 CSS Calc。
堆栈片段
.flex {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
}
.flex div:nth-child(1),
.flex div:nth-child(3) {
flex: 1;
}
.flex div:nth-child(2),
.flex div:nth-child(4) {
flex-basis: 60%;
}
.flex::before {
content: ''; width: 100%;
order: 1;
}
.flex div:nth-child(4) {
order: 2;
}
.flex::after {
content: ''; width: 100%;
order: 3;
}
.flex div:nth-child(5) {
order: 4;
}
/* styling */
.flex {
height: 200px;
border: 1px solid red;
}
.flex span {
display: inline-block;
border: 1px solid gray;
padding: 2px;
margin: 2px;
}
.flex div:nth-child(2) span,
.flex div:nth-child(4) span {
width: calc(100% - 10px);
}
.flex div:nth-child(1) {
text-align: right;
}
<div class="flex">
<div><span>http(s)</span></div>
<div><span>url</span></div>
<div><span>path</span></div>
<div><span>***</span></div>
<div><span>authenticate</span></div>
</div>
另一种选择是保持最初的弹性column方向，并使用额外的包装器使用绝对定位http(s)/路径 items.
.flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex > div:nth-child(-n+2) {
position: relative;
width: 60%;
}
.flex div div:nth-child(1) {
position: absolute;
top: 0;
right: 100%;
}
.flex div div:nth-child(3) {
position: absolute;
top: 0;
left: 100%;
}
/* styling */
.flex {
height: 200px;
border: 1px solid red;
}
.flex span {
display: inline-block;
width: calc(100% - 10px);
border: 1px solid gray;
padding: 2px;
margin: 2px;
}
.flex div div:nth-child(1) {
text-align: right;
}
.flex div div:nth-child(1),
.flex div div:nth-child(3) {
width: auto;
}
<div class="flex">
<div>
<div><span>http(s)</span></div>
<div><span>url</span></div>
<div><span>path</span></div>
</div>
<div><span>***</span></div>
<div><span>authenticate</span></div>
</div>
更新（基于具有类似需求的另一个问题）
人们还可以保留更简单的标记，无需额外的包装，并使用inline-flex结合使flex父级也是一个弹性容器。
堆栈片段
body {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.flex {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.flex div:nth-child(2),
.flex div:nth-child(4) {
width: 300px;
}
.flex div:nth-child(1) {
position: absolute;
top: 0;
right: 100%;
}
.flex div:nth-child(3) {
position: absolute;
top: 0;
left: 100%;
}
/* styling */
.flex {
border: 1px solid red;
}
.flex span {
display: inline-block;
width: calc(100% - 10px);
border: 1px solid gray;
padding: 2px;
margin: 2px;
text-align: left;
}
.flex div div:nth-child(1) {
text-align: right;
}
.flex div div:nth-child(1),
.flex div div:nth-child(3) {
width: auto;
}
<div class="flex">
<div><span>http(s)</span></div>
<div><span>url</span></div>
<div><span>path</span></div>
<div><span>***</span></div>
<div><span>authenticate</span></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
