Creating a fixed header with flexbox

Question

Using flexbox I'm trying to create a fixed header that includes only two elements and these elements are as far away from each other as possible. I cannot seem to get this to work with justify-content: space-between.

I expected this CSS code to work but the elements are just sitting next to each other.

header {
  width: 100%;
  position: fixed;
  display: flex;
  align-content: space-between;
}

<header>
<a>
  LOGO
  </a>
  <a>
  MENU
  </a>
</header>

the duplicate is a general one that will make you understand how to use each property for each axis (and many more) — Temani Afif, Feb 15 '19 at 10:32

Andy Hoffman · Answer 1 · 2019-02-15T11:56:56.393

4

You almost had it. Use justify-content, not align-content.

Edit: As a commenter pointed out, left: 0 is needed as well to truly keep each flex child pinned to their respective corners. Another option to beat the default browser margins would be to instead add html, body { margin: 0; }.

header {
  display: flex;
  width: 100%;
  position: fixed;
  left: 0;
  justify-content: space-between;
}

<header>
  <a>
  LOGO
  </a>
  <a>
  MENU
  </a>
</header>

edited Feb 15 '19 at 11:56

answered Feb 15 '19 at 10:27

Andy Hoffman

18,436
4
42
61

1

the width is needed because the element is set position:fixed – Temani Afif Feb 15 '19 at 10:33
You're right. I had removed that rule, mistakenly. Replaced! – Andy Hoffman Feb 15 '19 at 10:34
1

@AndyHoffman you can add `left: 0` too... now there's some *margin* to the left side and the content overflows a bit to the right – kukkuz Feb 15 '19 at 11:48

Creating a fixed header with flexbox

1 Answers1