Search code examples
htmlcssflexboxalignment

Pinning icons to corners of flexbox container with flex-start and flex-end

I have a video container. When the video is not playing, I'd like three things available:

  • Icon or initials of remote user (top left corner)
  • Video play icon (center)
  • expand / contract (bottom right corner)

I've tried to push the icons to the corners using align-self: flex-start and align-self: flex-end, but they are not going to the corners. At the same time I want the video icon centered in the box.

So far I have this:

enter image description here enter image description here

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

  • what I did is

    1. set the flex-direction property of your #video-container to column
    2. added justify-content:space-between; property to your #video-container 3.used align-selfproperty to align the child elements in to different places

    it's working fine.

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