Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Align Column DIVs as Left-Center-Right with CSS Flex?
To align items of a flex container along its main axis by distributing space around it, we use the justify-content property of CSS. The following are the values −
flex-start − The flex items are positioned at the start of the container. This is the Default value.
flex-end − The flex items are positioned at the end of the container
center − The flex items are positioned in the center of the container
space-between − The flex items will have space between them
space-around − The flex items will have space before, between, and after them
space-evenly − The flex items will have equal space around them
Syntax
The syntax of CSS justify-content property is as follows −
Selector { display: flex; justify-content: /*value*/ } Flex Items Will Have Space Between Them
The CSS justify-content property with the property space-between will let the flex items have space between them. Let us see an example to flex items with a space between them.
Example
<!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> Flex Items Will Have Equal Space Between Them
The CSS justify-content property with the property space-evenly will let the flex items have equal space between them. Let us see an example −
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> Flex Items are Positioned in the Center of the Container
The jusitify-content is set to center to align the flex items at the center of the container. In this example, we have used the CSS justify-content property with the property space-evenly to let one of the flex items to have equal space between them.
Example
Let us see the example to position flex items in the center of the container −
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: lightblue; } .container1 { align-self: flex-start; display: flex; background-color: rgb(71, 30, 255); width: 200px; margin: 20px; } .container1 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container2 { display: flex; background-color: rgb(14, 126, 79); width: 200px; justify-content: center; align-self: flex-start; margin: 20px; } .container2 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container3 { display: flex; flex-direction: column; background-color: rgb(168, 60, 10); width: 200px; align-items: center; margin: 20px; } .container3 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; width: 20px; font-size: 30px; } </style> </head> <body> <h1>Flex layout example</h1> <div class="container"> <div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container2"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container3"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </body> </html> 
2K+ Views
