关于flex弹性布局，上下两个div高度不固定，希望中间留空

Question

<div class="house-area-container">
                                    <div class="house-appearance-content">
                                        13㎡
                                    </div>
                                    <div class="house-appearance-title">
                                        面积
                                    </div>
                                </div>

上下有两个div 我希望分别固定在顶部和尾部，中间留空

.house-orientation-container {
    display: flex;
    justify-content: flex-end;
    background: deeppink;
}

.house-appearance-content {
    font-size: 18px;
    width: 50px;
    background: #5c2699;
}

.house-appearance-title {
    font-size: 12px;
    color: #CFC7C7;
    align-self: flex-end;
}

使用align-self: flex-end;会出现这样的效果
但是我希望 面积 在 左侧底部，请问怎么写css

Answer 1

flex默认是横向排列的, 你需要改变flex-direction才能纵向排列
然后使用justify-content: space-between;让元素均匀分布

另外, 子元素.house-appearance-content要靠左需要设置 align-self: flex-start; 或者不设置会自动靠左
上面的元素.house-appearance-title也一样

.house-orientation-container {
    display: flex;
    justify-content: flex-end;
    background: deeppink;
    flex-direction: column;
    justify-content: space-between;
}
.house-appearance-title {
    font-size: 12px;
    color: #CFC7C7;
    align-self: flex-start;
}