我正在尝试使用 flexbox 实现此目的:
我知道如何使用隐藏元素来做到这一点 as in this fiddle :
.container {
display: flex;
justify-content: space-between;
border: 3px solid blue;
}
.box {
width: 100px;
height: 100px;
background: red;
}
.box:first-child {
visibility: hidden;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
但这似乎太老套了,不可能是对的。
最佳答案
我遇到了同样的问题,并通过使用 CSS 网格找到了更好的解决方案。
.box {
width: 100px;
height: 100px;
background-color: red;
}
.parent {
display: grid;
/*
* Create 3 columns grid (1 ghost grid column)
* Make first/left (ghost) and last/right column streched and center one auto width
*/
grid-template-columns: 1fr auto 1fr;
}
.center {
grid-column-start: 2;
/* start your center child from 2nd column */
}
.right {
/* Do your content right align */
display: flex;
justify-content: flex-end;
align-items: center;
}
<div class="parent">
<div class="center">
<div class="box">Center</div>
</div>
<div class="right">
<div class="box">right</div>
</div>
</div>
关于html - 使用 flexbox 将一个元素居中对齐,同时将其唯一的兄弟元素右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57634673/