无法在flexbox中对齐元素
无法在flexbox中对齐元素
提问于 2018-05-31 06:22:59
我当前正在尝试将flexbox中的最后一个元素与其在flexbox底部的元素的高度对齐，但我无法做到这一点。我知道我可以使用align-content: stretch，这是默认行为，但我不希望元素之间有间隙。
我只想让“更多的东西”放在盒子的底部，并向右对齐，但我无法通过阅读flexbox规范来弄清楚如何做到这一点。
HTML：
<div class="flex">
<img/>
<div>
<p>
Stuff
</p>
</div>
<div class="bottom">
<p>
More Stuff
</p>
</div>
</div>CSS：
.flex{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 500px;
height: 600px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
img{
width: 100%;
height: 250px;
}
.flex div{
width: 100%;
}
.bottom{
align-self: flex-end;
text-align: right;
}回答 1
Stack Overflow用户
发布于 2018-05-31 06:50:06
如果您在div上放置了不同颜色的背景，会更容易看到，但由于flex-wrap: wrap的原因，您的两个元素都是100%宽的，并且位于页面中心的顶部。
因此，要对齐或对齐元素，首先需要设置调整方向。(将方向设置为列的任何一行都会更改主轴，您可以在MDN上看到图表)
Row将主轴设置为左-右，column将主轴设置为up-down。
之后，您可以使用Justify-content: space-beween在box div中沿主轴尽可能多地分隔元素。(align-content控制设置为相反轴的任何内容)
.flex{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
align-content: flex-start;
width: 500px;
height: 600px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50614122
复制相关文章
相似问题