Aligning adjacent elements to left, center, and right using flex?

Asked Jan 24 '20 at 10:45

Active Jan 24 '20 at 11:02

Viewed 64 times

I would like to align HeaderNavLinks to the left, center Logo, and align the remaining items Contact, Mailbox, Language, Admin to the right.

I'm actually limited to add an additional parent div for each of these elements.
Is there a way to do this? I can't seem to properly align the Logo at the center of the page.

.container {
  display: flex;
}

.container>div:first-child {
  margin-right: auto;
}

.container .center {
  align-self: center;
}

.push {
  margin-left: auto;
}

<div class="container">
  <div>HeaderNavLinks</div>
  <div class="center">Logo</div>
  <div class="push">Contact</div>
  <div>Mailbox</div>
  <div>Language</div>
  <div>Admin</div>
</div>

edited Jan 24 '20 at 11:02

asked Jan 24 '20 at 10:45

NAR

3

In your example they are aligned – demkovych Jan 24 '20 at 10:48
obviously, `Logo` is not center aligned. – NAR Jan 24 '20 at 10:54
It should be exactly on the middle of the page instead between of the nav and menu items? – demkovych Jan 24 '20 at 10:56
right.. that's my issue, I need to align *Logo* at the center of the page. – NAR Jan 24 '20 at 11:04
you can use `position:absolute; left: 0; right: 0; ` but it will not be responsive on smaller screens – demkovych Jan 24 '20 at 11:05
1

so I followed your advice. and came up with this. https://codepen.io/zettainino/pen/OJPqXGy thanks! – NAR Jan 24 '20 at 16:08

Aligning adjacent elements to left, center, and right using flex?

0 Answers0