html - 使用 flex-start 和 flex-end 将图标固定到 flexbox 容器的角落

Question

我有一个视频容器。当视频没有播放时，我想要三个可用的东西：

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

我尝试使用align-self: flex-startand将图标推到角落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：

  <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>

标签： htmlcssflexboxalignment

Answer 1

我所做的是

1. 将flex-direction你的属性设置#video-container为column
2. justify-content:space-between;向您的#video-container 3.used属性添加属性align-self以将子元素对齐到不同的位置

它工作正常。

#video-container{
  width:200px;
  height:200px;
  border:1px solid #000;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

#video-container>span{
  border:1px solid #000;
  width:50px;
  height:50px;
  
}


.center{
  align-self:center;
}

.bottom-right{
  float:right;
  align-self:flex-end;
 }

<div id="video-container">
  <span class="top-left"></span>
  <span class="center"></span>
  <span class="bottom-right"></span>
</div>