要求

容器宽高不定，子元素宽高固定。实现如下效果图：

代码实现

1、html代码

<div class="panel">
  <span class="item" />
  <span class="item" />
  <span class="item" />
</div>

2、css代码

.panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item{
  width: 100px;
  height: 100px;
  background-color: red;
}
.item:nth-child(1){
  align-self: flex-start;
  background-color: black;
}
.item:nth-child(3){
  align-self: flex-end;
  background-color: yellow;
}

最后代码实现与效果图一致。