Document

You know that with flexbox there are two axis who allow us to move the position of our elements but imagine that you only want move one element.. Well in this chapter we will see how we can move only one element on the main axis.

So justify-content property move items on the main axis but as you know it will move all the childs elements of your flex container, the solution is simply to use the margin property by using margin: auto this will move all the other elements as the oposite of your element with the auto property.

As you can see in our example we only want our home div on the left side on the main axis which is horizontal because of flex-direction:row, so two solutions the first one is to use margin-right:auto on the home div who gonna push until on parent border the others elements. The other solution is to use margin-left:auto on the search who gonna push the home div top on the left border of the parent border.

We will see later how to move only one item on the second axis with align-self.

Positioning single item on main axis.