flexbox header with logo in the middle

September 24, 2022

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

>Solution :

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"