我正在尝试水平居中对齐 group1
并右对齐 group2
与 flex。
<div class="holder">
<div class="group1">
...
</div>
<div class="group2">
...
</div>
</div>
CSS:
.holder{
display: flex;
justify-content:center;
}
.group2{
align-self: flex-end;
}
但是一切都只是居中,有什么解决办法吗?
最佳答案
由于 flexbox 是建立在对边距的操作之上的,因此除了使用 position:absolute
之外,没有其他方法可以将一项移出流。
任何其他方法都会使中心元素受到其他元素的影响。
.holder {
display: flex;
justify-content: center;
border: 1px solid grey;
position: relative;
}
.group1 {
background: plum;
}
.group2 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: 1px solid red;
}
<div class="holder">
<div class="group1">
Group 1
</div>
<div class="group2">
Group 2
</div>
</div>
关于html - 将中心和右侧与 flex 对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34289021/