To align items of a flex container along its main axis by distributing space around it, we use the justify-content property of CSS.
Syntax
The syntax of CSS justify-content property is as follows −
Selector { display: flex; justify-content: /*value*/ }
Example
The following examples illustrate CSS justify-content property.
<!DOCTYPE html> <html> <head> <style> #root { margin: 5%; display: flex; justify-content: space-between; } #one { float:left; box-shadow: inset 0 0 34px #b798e1; } #two { box-shadow: inset 0 0 34px #236fa0; } #three { box-shadow: inset 0 0 34px #43946a; } .element { padding: 7%; border-radius: 15%; } </style> </head> <body> <div id="root"> <div class="element" id="one">1</div> <div class="element" id="two">2</div> <div class="element" id="three">3</div> </div> </body> </html>
This gives the following output
Example
<!DOCTYPE html> <html> <head> <style> #root { margin: 5%; padding: 2%; display: flex; justify-content: space-evenly; box-shadow: inset 0 10px 40px magenta; font-weight: bold; } div > div { padding: 2%; border-radius: 15%; } div:nth-of-type(even) { box-shadow: inset 2px 2px 20px orange; } div > div:nth-of-type(odd) { box-shadow: inset 2px 2px 20px lightblue; } </style> </head> <body> <div id="root"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>
This gives the following output