Position last flex item at the end of container
This question concerns a browser with full css3 support including flexbox.
I have a flex container with some items in it. They are all justified to flex-start but I want the last
.end item to be justified to flex-end. Is there a good way to do this without modifying the HTML and without resorting to absolute positioning?
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via
align-self, any positive free space is distributed to auto margins in that dimension.
Therefore you could use
margin-top: auto to distribute the space between the other elements and the last element. This will position the element at the bottom.
You can also avoid using a class and utilize the
last-child pseudo class.