How to position an element at the end of a flexbox row

Flexbox rows may not work quite the way you think. If you want to have a row of elements, and you want to align one element at the end of the row, many CSS rules won’t work.

Floats do not apply to elements using flex, so you can’t use a float:right like you would inside of a div. Instead, you need to use a margin to place an element at the end of the row. Here are some examples:

See the Pen Flex Box End of Row by Glenn Stovall (@GSto) on CodePen.