About this deal
div class = "d-flex justify-content-start" >... div > < div class = "d-flex justify-content-end" >... div > < div class = "d-flex justify-content-center" >... div > < div class = "d-flex justify-content-between" >... div > < div class = "d-flex justify-content-around" >... div > < div class = "d-flex justify-content-evenly" >... div > div class = "d-flex flex-column bd-highlight mb-3" > < div class = "p-2 bd-highlight" >Flex item 1 div > < div class = "p-2 bd-highlight" >Flex item 2 div > < div class = "p-2 bd-highlight" >Flex item 3 div > div > < div class = "d-flex flex-column-reverse bd-highlight" > < div class = "p-2 bd-highlight" >Flex item 1 div > < div class = "p-2 bd-highlight" >Flex item 2 div > < div class = "p-2 bd-highlight" >Flex item 3 div > div > Flex item 3
Flex item
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right ( .mr-auto), and pushing two items to the left ( .ml-auto). div class= "d-flex flex-column" >