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

【问题标题】：Pinning icons to corners of flexbox container with flex-start and flex-end使用 flex-start 和 flex-end 将图标固定到 flexbox 容器的角落
【发布时间】：2019-08-10 22:37:08
【问题描述】：

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

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

我尝试使用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：

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

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

你可以通过css定位来实现这个

请检查以下小提琴

Fiddle Link

   .topLeft, .bottomRight{
    position:absolute;
    }

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

【讨论】：

【解决方案2】：

.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;
  position: relative;
  .top-left {
    align-self: flex-start;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .bottom-right {
    align-self: flex-end;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
}

使用 'align-self' 无法修复位置。因此，尝试添加相对位置和绝对位置来解决这些问题。参考上面的代码。

【讨论】：

【解决方案3】：

我做的是

将#video-container 的flex-direction 属性设置为column
将justify-content:space-between; 属性添加到您的#video-container 3.使用align-selfproperty 将子元素对齐到不同的位置

一切正常。

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

【讨论】：