I am having trouble styling a page header in our application using the flex
display property. Specifically, I am struggling to align my class device-name-test
to float right on the dashboard header.
<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>
When you view my online project at this link, you'll see that the text Device Name Here!
is the final div and should float all the way to the right (flex-end
).
I am working on fully understanding how to use the flex
display property, but some aspects are unclear to me.
Thank you in advance. Bob