Center flex items with one at the end of the row [duplicate]

Answer 1

Following the idea of Chonchol answer, and trying to keep the content centered, I have added a pseudo element on the container

.container {
  display: flex;
  border: solid 1px blue;
  margin-top: 60px;
}

.container div {
  margin: 10px;
  border: solid 1px red;
}

.container .right {
  margin-left: auto;
  width: 150px;
  text-align: right;
}

.container:before {
  content: "";
  width: 150px;
  margin-right: auto;
  margin-left: 10px;
  background-color: yellow;
}

<div class="container">
    <div>Project</div>
    <div>About the Project</div>
    <div>Contact Us</div>
    <div class="right">Mailbox</div>
</div>

I set on the pseudo a color so that the example can be understood, of course it should be invisible.

To get the elements to be perfectly centered, you need to give to the pseudo element the same width than the last element. If you know it, do so. If not, play with a greater width and a text-align as in the snippet. Of course, if you don't need the center to be perfect, that is not necesary

Answer 2

Add margin-left: auto; in your last-child of container div. Here i am doing below way:

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  /* width: 100%; */
  height: 50px;
  background: #333;
  padding: 15px;
  color: #ffffd;
  padding: 10px;
}
.container> .leftone {
  margin-left: 20px;
}
.container div:last-child {
  margin-left: auto;
}

<div class="container">
  <div class="leftone">Project</div>
  <div class="leftone">About the Project</div>
  <div class="leftone">Contact Us</div>
  <div>Mailbox</div>
</div>

WORKING FIDDLE

Answer 3

The layout can be achieved with flex auto margins and an invisible flex item.

.container {
  display: flex;
}
.container > div:first-child {
  margin-right: auto;
  visibility: hidden;
}
.container > div:last-child {
  margin-left: auto;
}

<div class="container">
  <div>Mailbox</div><!-- invisible flex item -->
  <div>Project</div>
  <div>About the Project</div>
  <div>Contact Us</div>
  <div>Mailbox</div>
</div>

jsFiddle

Notes:

• Flex auto margins are used for aligning the flex items.
• Since flexbox alignment works by distributing free space in the container, an invisible flex item is added to create equal balance on both sides.
• It's important that the phantom item be exactly the same width as the last item (Mailbox). Otherwise, there won't be equal balance and the middle items will not be perfectly centered.

Learn more here: Methods for Aligning Flex Items