выровнять правый элемент видео внутри div

Question

Я пытаюсь выровнять правый нижний элемент видео внутри div. Ниже приведен код, который мне удалось выполнить, выровняв элемент видео снизу, но не смог вывести его вправо, если контейнер для погружений:

video {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}

<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex align-self-end justify-content-md-end align-items-md-end" width="200" height="100" controls="" style="background-color: #e6e4e4;" preload="none" autoplay="" loop=""></video></div>

Посоветуйте, пожалуйста, стоит ли поместить его в промежуток?

Answer 1

Я думаю, что если вы просто добавите flex-direction: row-reverse к своему классу d-inline-flex, вы получите желаемый результат.

Поскольку опубликованные вами css были пустыми и дублированными, я удалил эти классы из фрагмента. Я также поместил ваш встроенный стиль из видео в класс видео css, просто чтобы оптимизировать код.

Надеюсь, это поможет

пс, только что заметил «нижнюю» часть вашего вопроса , align-items, используя flex-end, разместит видео внизу (я думал, что вы хотите его вверху) ..

// справа внизу

.d-inline-flex {
  display: flex;
  flex-direction:row-reverse;
  background-color: #141414;
  height: 400px;
  width: 100%;
}

video {
  width: 200px;
  height: 100px;
  background-color: #e6e4e4;
  justify-content:center;
  align-self:flex-end;
  align-content:flex-end;

}

<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex" controls="" preload="none" autoplay="" loop=""></video></div>

// справа вверху

.d-inline-flex {
  display: flex;
  flex-direction: row-reverse;
  background-color: #141414;
  height: 400px;
  width: 100%;
}

video {
  width: 200px;
  height: 100px;
  background-color: #e6e4e4;
  display: flex;
  justify-content: center;
}

<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex" controls="" preload="none" autoplay="" loop=""></video></div>

Answer 2

video {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}
.d-inline-flex{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex align-self-end justify-content-md-end align-items-md-end" width="200" height="100" controls="" style="background-color: #e6e4e4;" preload="none" autoplay="" loop=""></video></div>