How do I separate elements horizontally in a flex container?

Question

I have my header in my html with three elements an image representing the logo, the title, and some icons, in that order. I already have them centered using flexbox but I want to keep the logo in the leftmost part of the screen and the icons on the opposite side, while keeping the title in the middle, this is my html:

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title .logo {
  justify-content: flex-start;
}

<header>
  <div class="title">
    <img class="logo" src="./img/logo.png" alt="" width="100" height="100">
    <h1 class="subtitle">Lorem ipsum dolor</h1>
    <div class="socials">
      <a href="">
        <i class="fab fa-facebook fa-2x"></i>
      </a>
      <a href="">
        <i class="fab fa-instagram fa-2x"></i>
      </a>
    </div>
  </div>
</header>

I have tried expanding the margin of the title, but it doesn't look good and here's a screenshot of what the header looks like:

use flex direction: row and justify content: space-between for you container — Gulshan Aggarwal, Jul 21 '21 at 13:16
@GulshanAggarwal - sounds like a working solution-- you should post as an answer! — Alexander Nied, Jul 21 '21 at 13:20

score 1 · Answer 1 · edited Jul 21 '21 at 13:36

1

Just make a little change in your css file, Change justify-content to space-between for your title selector

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

edited Jul 21 '21 at 13:36

Alexander Nied

12,804
4
25
45

answered Jul 21 '21 at 13:26

Gulshan Aggarwal

954
1
7
13

I hope this helped you ! and for a bonus you can also accept my answer Thankyou!! – Gulshan Aggarwal Jul 21 '21 at 13:38

score 0 · Accepted Answer · answered Jul 21 '21 at 13:17

You can use flexbox auto-margins to achieve this effect:

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title .logo {
  justify-content: flex-start;
}

.logo {
  margin-right: auto;
}

.socials {
  margin-left: auto;
}

<header>
  <div class="title">
    <img class="logo" src="./img/logo.png" alt="" width="100" height="100">
    <h1 class="subtitle">Lorem ipsum dolor</h1>
    <div class="socials">
      <a href="">
        <i class="fab fa-facebook fa-2x"></i>
        fb
      </a>
      <a href="">
        <i class="fab fa-instagram fa-2x"></i>
        insta
      </a>
    </div>
  </div>
</header>

How do I separate elements horizontally in a flex container?

2 Answers2