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;
}
Mailbox
Project
About the Project
Contact Us
Mailbox
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
