CSS: flexbox first child to left and rest to center [duplicate]

Question

I am playing with flexbox of CSS. I am trying to create a nav menu. I want the first item of the menu to be in the left most and rest of the item to be in the center. Currently I have everything in center. To align content in center I am using justify-content: center with container.

But I dont know I can align a particualr item in flex-box. I tried to float it but since float are not meant for alignment and also float does not work with flexbox items. Is there any way/workaround to achieve this? Thanks. Here's the pen to play.

body{
  background: #e0f080;
    color: white;
    font-weight: bold;
    font-size: 1em;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: tomato;
    color: white;
    font-weight: bold;
    font-size: 1em;
    justify-content: center;
}
.flex-item{  
    align-content: space-around;
    margin: 10px;
  border: 2px solid white;
  padding: 5px;
}
.menu{
  order: -1;  
  align-self: start;
  font-size: 3em;
}

Bookrack

Answer 1

Use positioning - add position: relative to the flex-container and apply this to menu:

position: absolute;
top: 0;
left: 0;

I also removed one invalid property that you were using (align-self: start) to clean it up - demo below:

body {
  background: #e0f080;
  color: white;
  font-weight: bold;
  font-size: 1em;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  background-color: tomato;
  color: white;
  font-weight: bold;
  font-size: 1em;
  justify-content: center;
  position: relative;
}
.flex-item {
  align-content: space-around;
  margin: 10px;
  border: 2px solid white;
  padding: 5px;
}
.menu {
  order: -1;
  font-size: 3em;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="flex-container">
  <div class="menu">
    <span>&#8801;<span>
  </div>
      
<a class="flex-item">item 1</a>
<a class="flex-item">item 2</a>
<a class="flex-item">item 3</a>
</div>

Arlberg

@HiteshKumar let me know your feedback on this, thanks! – Arlberg

You nailed it. Thanks a ton! – Bookrack

Answer 2

for flex-direction: row (default) you should set margin-right: auto to align the child to the left.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

try this code and let me know if u want u can also go to this link https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

Forfend