如何使用Flexbox将指定盒子对齐到容器的右下角？

方法一：利用Flex布局的自动外边距（推荐） #

在flex容器里，margin-left: auto 会把元素推到容器右侧，margin-top: auto 会把元素推到容器底部，两者结合就能让目标盒子定位到右下角。修改你的CSS代码：

.gallery {
    display: flex;
    height: 480px;
    width: 1170px;
    position: relative;
    flex-wrap: wrap;
    outline: 3px solid black;
    margin: 50px auto 0;
}

.gallery .column:last-child {
    width: 770px;
    height: 224px;
    display: flex;
    justify-content: flex-start;
    border: 3px solid green;
    /* 添加这两行实现右下角对齐 */
    margin-left: auto;
    margin-top: auto;
}

.gallery .column:last-child .box {
    height: 224px;
    width: 770px;
}

方法二：绝对定位 #

因为.gallery已经设置了position: relative，可以直接给目标盒子设置绝对定位，固定到容器右下角：

.gallery {
    display: flex;
    height: 480px;
    width: 1170px;
    position: relative;
    flex-wrap: wrap;
    outline: 3px solid black;
    margin: 50px auto 0;
}

.gallery .column:last-child {
    width: 770px;
    height: 224px;
    display: flex;
    justify-content: flex-start;
    border: 3px solid green;
    /* 添加这三行实现右下角定位 */
    position: absolute;
    bottom: 0;
    right: 0;
}

.gallery .column:last-child .box {
    height: 224px;
    width: 770px;
}

两种方法的适用场景 #

• 方法一基于flex原生特性，不会破坏原有flex布局的流结构，适合需要保留flex排版逻辑的场景；
• 方法二是精准定位，操作简单，但如果容器内有其他元素，可能会出现重叠，需要根据实际布局调整层级或位置。

内容的提问来源于stack exchange，提问作者Marius Cojocaru