Использование flex-box css для форматирования заголовка страницы с различными типами элементов

Question

Я пытаюсь стилизовать заголовок страницы в нашем приложении, используя flex display. У меня проблемы с тем, как настроить мой класс device-name-test так, чтобы он плавал прямо в заголовке моей панели.

<div class="diagnosis-header" [class.disabled]="headerIsDisabled">
   <div class="either-toggle diagnosis-title">My Dashboard</div>
   <div> more elements here in between... </div>
   <!-- Here is my final dev which should be floated all the way right -->    
   <div class="device-name-test">Device Name here !</div>
</div>

Глядя на мой онлайн-проект, вы увидите, что мой текст Device Name Here! текст последний div - который должен плавать до упора (flex-end?)

https://angular-9-dashboard-flex-example.stackblitz.io/

Я пытаюсь получить сильный gr asp из используя дисплей flex, но некоторые детали не ясны.

заранее спасибо. Боб

Answer 1

Я получил его на работу, удалив flex:1 и добавив margin-left:auto к последнему div. Вот так:

.device-name-test {
    /* flex: 1; */
    margin-left: auto;
}

Здесь объясняется: https://medium.com/@iamryanyu / как выровнять-последний-гибкий-элемент-вправо-73512e4e5912 .