Center flex items with one at the end of the row

Question

I am creating a navbar with flexbox. Here is my html:

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

And my css:

.container {
  display: flex,
  justify-content: center
}

Here is what it currently looks like:

I want the mailbox div to be at the end of the flex container. I want it to look more like this.

I have tried flex-end on that flex item to no avail. What do I need to do to make that happen?

score 23 · Accepted Answer · edited May 23 '17 at 12:16

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

Chonchol Mahmud · Answer 2 · 2016-02-07T06:38:16.053

6

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: #ddd;
  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

edited Feb 07 '16 at 06:38

answered Feb 07 '16 at 06:31

Chonchol Mahmud

2,717
7
39
72

I still want the main part of the `nav` to be centered as in the original `css`. Is there any way to do that? – jhamm Feb 07 '16 at 06:44

score 3 · Answer 3 · answered Feb 07 '16 at 10:21

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

Center flex items with one at the end of the row

3 Answers3

jsFiddle

Linked

Related