Flex
Apply display utilities to create a flexbox container and transform direct children elements into flex items.
Set the direction of flex items in a flex container with direction utilities.
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis.
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis.
Use align-self utilities on flexbox items to individually change their alignment on the cross axis.
Use the
.flex-fill
class on a series of sibling elements to force them into widths equal to their content.
Use
.flex-grow
utilities to toggle a flex item’s ability to grow to fill available space.
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.
Change the visual order of specific flex items with a handful of order utilities.