Html 使用flex start和flex end将图标固定到flexbox容器的角上

我有一个视频容器。当视频未播放时，我希望有三件事可用：

• 远程用户的图标或首字母缩写（左上角）
• 视频播放图标（中）
• 展开/收缩（右下角）

我尝试使用

align-self:flex-start

和

align-self:flex-end

将图标推到角落，但它们不会移到角落。同时，我希望视频图标在框中居中

到目前为止，我有：

我的SCSS：

.video-container {
  width: 270px;
  height: 202px;
  border: 1px solid #cececc;
  background-color: $grey-light;
  padding: 15px;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  .top-left {
    align-self: flex-start;
  }
  .bottom-right {
    align-self: flex-end;
  }
}

HTML:

---

您可以通过css定位来实现这一点

请检查下面的小提琴

现在使用普通CSS，您可以将其转换为您的SCS

.video容器{
宽度：270px；
高度：202px；
边框：1px实心#cececc；
背景色：$灰色灯光；
填充：15px；
利润率：20px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
.左上角{
自我校准：灵活启动；
位置：绝对位置；
顶部：0px；
左：0px；
}
.右下角{
自对准：柔性端；
位置：绝对位置；
底部：0px；
右：0px；
}
}

我所做的是

将

#video container

的

flex direction

属性设置为

列

增加了

对正内容：间距属性到您的
#视频容器
3.使用
align self
属性将子元素对齐到不同的位置

很好用

#视频容器{
宽度：200px；
高度：200px；
边框：1px实心#000；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
#视频容器>跨度{
边框：1px实心#000；
宽度：50px；
高度：50px；
}
.中心{
自对准：居中；
}
.右下角{
浮动：对；
自对准：柔性端；
}

  <div class='video-container' id='remote-media' data-target='video.remoteContainer'>
    <span class='top-left'>
      <%= concept(Avatar::Cell,@meeting.invitee_id,current_user: current_user ) %>
    </span>
    <i class="fa fa-video fa-3x"></i>
    <span class='video-expand bottom-right'>
      <i class="far fa-expand-arrows-alt fa-2x" data-target='video.expand' data-action='click->video#expand'></i>
      <i class="far fa-compress-alt fa-2x display-none" data-target='video.contract' data-action='click->video#contract'></i>
    </span>
  </div>

   .topLeft, .bottomRight{
    position:absolute;
    }