Html 如何设置flexbox子级之间的自定义距离

.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
身高：140；
}
.a{
边缘顶部：10px；
高度：17px；
}
.b{
//??
高度：40px；
}
c{
边缘底部：10px；
高度：18px；
}

我在容器中有三个

s a、b和c

。我想要一个元素a定位在容器顶部10px，b定位在容器顶部50px，c定位在容器底部10px。

---

我应该如何设置b的风格以实现这一点？如果可能的话，我想避免使用绝对位置，因为当我尝试使用它时，不知何故b的宽度改变了。我想知道是否有一种方法可以设置flexbox子级之间的自定义距离。

在此处使用边距调整距离更容易-因此您可以删除

调整内容：间距

将
margintop:23px
添加到
b
和
margintop:auto
添加到
c
。检查以下演示（您可以检查红线以验证距离是否正确）：


*{
框大小：边框框；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
/*证明内容：之间的空间*/
高度：140像素；
边框：1px实心；
位置：相对位置；
}
.a{
边缘顶部：10px；
高度：17px；
}
.b{
高度：40px；
页边距顶部：23px；/*已添加*/
}
c{
边缘底部：10px；
高度：18px；
页边距顶部：自动；/*已添加*/
}
/*造型*/
.a、.b、.c{
边框：1px纯蓝色；
背景：卡德蓝；
}
在…之前在…之前在…之前{
内容：''；
排名：0；
宽度：2倍；
位置：绝对位置；
左：100px；
背景：红色；
}
a:以前{
高度：10px；
}
b:以前{
高度：50px；
左：200px；
}
c:以前{
左：100px；
顶部：未设置；
底部：0；
高度：10px；
}

我不太确定你想要完成什么；你能给我看一张图片来解释你期望看到的东西吗？但是在b上面你有a？是的。a高于b，我更新高度。我可以为你做，你能为我画你想要的吗？非常感谢！这正是我要找的。我试图为b设定利润率，但a和b之间仍有一些差距。现在我明白了我需要删除justify content:space-between来定制我自己的距离。
<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

.container{
    display: flex;
    flex-direction: column;    
    justify-content: space-between;
    height: 140;
}


.a{
    margin-top: 10px;
    height: 17px;
}

.b{
    //??
    height: 40px;
}

.c{
    margin-bottom: 10px;
    height: 18px;
}