如何实现右侧容器元素垂直space-between布局？设置后无效求助

要实现Apple在顶部、Sony在底部的布局，你的代码存在两个核心问题：

1. justify-content 是Flex容器专属属性，你的rightContainer未设置display: flex，导致该属性完全不生效。
2. 即使开启Flex布局，默认是水平排列（flex-direction: row），要实现垂直分布需改为column；同时容器必须拥有足够的垂直高度，否则space-between无法拉开两个元素的间距。

无需修改HTML结构，直接调整CSS即可：

.mainContainer {
    display: flex;
    width: 100%;
    height: 100vh; /* 给父容器设置全屏高度，为子容器提供垂直空间 */
    background-color: cadetblue;
    margin: 0; /* 清除body默认外边距，避免出现滚动条 */
}

.leftContainer {
    width: 100%;
    background-color: red;
    text-align: left;
}

.rightContainer {
    width: 100%;
    background-color: blue;
    text-align: right;
    display: flex; /* 将容器转为Flex容器 */
    flex-direction: column; /* 设置子元素垂直排列 */
    justify-content: space-between; /* 让子元素上下两端对齐，自动拉开间距 */
}

修改完成后，rightContainer内的Apple会固定在顶部，Sony固定在底部，同时文字保持靠右对齐。

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