Закрепление значков в углах контейнера flexbox с помощью flex-start и flex-end - PullRequest
Новая
       24

Закрепление значков в углах контейнера flexbox с помощью flex-start и flex-end

1 голос
/ 20 марта 2019

У меня есть видео контейнер.Когда видео не воспроизводится, я хотел бы иметь три доступные вещи:

  • Значок или инициалы удаленного пользователя (верхний левый угол)
  • Значок воспроизведения видео (в центре)
  • развернуть / сжать (нижний правый угол)

Я пытался выдвинуть значки в углы, используя align-self: flex-start и align-self: flex-end, но они не идут в углы.В то же время я хочу, чтобы значок видео находился в центре поля.

Пока у меня есть это:

enter image description here enter image description here

Мой 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>

Ответы [ 3 ]

2 голосов
/ 20 марта 2019

что я сделал, это

  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>
0 голосов
/ 20 марта 2019 

.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' не может исправить положение. Итак, попробуйте добавить относительную и абсолютную позицию для решения этих проблем. См. Приведенный выше код.

0 голосов
/ 20 марта 2019

Вы можете достичь этого путем позиционирования CSS

Пожалуйста, проверьте следующую скрипку

Ссылка скрипта 

   .topLeft, .bottomRight{
    position:absolute;
    }

Теперь используется обычный CSS, и выможет преобразовать это в ваш SCSS

...