flexbox header with logo in the middle

Question

First time using Flex and after lots of reading and trying I still haven't managed to solve this. How can i achieve this?

Example

Answer 1

.wrapper{
  background: #ddd;
  display: flex;
}
.item1__wrapper{
  flex: 1 0 0;
  display: flex;
}
.item-1{
  align-self: flex-start;
}
.item {
  border: 1px solid #000;
  padding: .5rem;
}
.wrapper__inner{
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end
}

<div class="wrapper">
  <div class="item1__wrapper">
    <div class="item item-1">Item 1</div>
  </div>
  <div class="item">Logo</div>
  
  <div class="wrapper__inner">
    <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  </div>
</div>

Answer 2

I would center the logo independently of the other parts by using display: absolute

.container {
  border: 1px solid green;
}

.item {
  height: 50px;
  line-height: 50px;
  border: 1px solid red;
  padding: 10px;
  width: 50px;
}

.item1 {
  float: left;
}

.item2 {
  float: right;
}

.item3 {
  float: right;
}

.logo {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
}

<div class="container">
  <div class="item item1">Item1</div>
  <div class="item logo">Logo</div>
  <div class="item item2">Item2</div>
  <div class="item item3">Item3</div>
  <div style="clear:both"></div>
</div>

notice last navbar needs "clear"