CSS Flex navbar - how?

Question

First time playing with Flex and after lots of reading and playing I still haven't managed to solve this.

I want a navbar that is fixed. But that is easy the problem is how do I align Item 1 to start en Item 2 & 3 to the end? Don't matter what I do they are grouped. I am sure that you will be able to show me my noob mistake so for that I say right of - thank you!

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 100vw;
    height: 8vh;
    background-color: lightgrey;

}

.flex-item {
    align-self: flex-start;
    -webkit-align-self: flex-end;
}

.item1 {
    background-color: cornflowerblue;
    width: 200px;
    height: 5vh;
    align-self: flex-start;
    -webkit-align-self: flex-start;
}

.item2 {
    background-color: red;
    width: 100px;
    height: 5vh;
    align-self: flex-end;
    -webkit-align-self: flex-end;
}

.item3 {
    background-color: yellow;
    width: 100px;
    height: 5vh;
    align-self: flex-end;
    -webkit-align-self: flex-end;
}

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>

score 3 · Accepted Answer · answered Oct 20 '17 at 14:06

You can remove the align-self properties on the .flex-item divs, and instead add margin-left: auto to the second .flex-item

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 100vw;
  height: 8vh;
  background-color: lightgrey;
}

.item1 {
  background-color: cornflowerblue;
  width: 200px;
  height: 5vh;
}

.item2 {
  background-color: red;
  width: 100px;
  height: 5vh;
  margin-left: auto;
}

.item3 {
  background-color: yellow;
  width: 100px;
  height: 5vh;

}

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>

Thank you, it seems like I was trying to dig a hole that didn't need to be. So much easier that I thought it would be. Lets hope this helps someone else. — swe_mattias, Oct 20 '17 at 14:43

CSS Flex navbar - how?

1 Answers1