所以,我想像上图那样对齐 flex-box 中的元素。
我的html如下:
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
CSS 作为
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
}
.flex-item:nth-child(2) {
align-items: center;
}
.flex-item:last-child {
align-items: flex-end;
}
最佳答案
使用align-self
而不是align-items
.flex-row {
min-height: 300px;
display: flex;
width: 90%;
margin: 1em auto;
border: 1px solid red;
justify-content: space-between;
}
.flex-item {
height: 50px;
background: lightblue;
width: 100px;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="container flex-row">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
关于html - 如何以三种不同的方式对齐 flex 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56322348/