Is it possible to have flex-start, flex center and flex-end in one line

Question

I want to align a logo , header fields and a sign in button in one line using flex. Logo should have flex-start , header fields should be center and the button should be flex-end . How do I achieve this.Thanks in advance.

             <div class="header">
                    <div class="header_topics">
                        <ul  style="display:flex;justify-content:center;">
                                    <li ><a href= "#"  > <span>Home</span></a></li>
                                    <li ><a href="#" ><span> About</span></a></li>

                                    <li><a href="#" ><span>Contact</span></a></li>
                                </ul>
                    </div>

                     <div class="signinx" style="display:flex;justify-content:flex-end">

                                    <div class="signin" >&nbsp;<a href="#">Signin&nbsp;<i class="fas fa-user"></i></a></div>
                     </div>

                </div>

Answer 1

When using flexbox, you should declare the layout in the parent element, which in your case would be .header. If we use justify-content: space-between, the child elements will line up as you wanted. Notice how we can now remove all previous child flex styles; the parent controls the layout.

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
}

ul { margin: 0; }

<header class="header">
  <div class="logo">
    <img src="https://placekitten.com/70/60" alt="">
  </div>
  <div class="header_topics">
    <ul>
      <li><a href="#"> <span>Home</span></a></li>
      <li><a href="#"><span> About</span></a></li>
      <li><a href="#"><span>Contact</span></a></li>
    </ul>
  </div>

  <div class="signinx">
    <div class="signin">&nbsp;<a href="#">Signin&nbsp;<i class="fas fa-user"></i></a></div>
  </div>

</header>

jsFiddle