How to Align Column DIVs as Left-Center-Right with CSS Flex

CSS Web Development Front End Technology

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.

Live Demo

<!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

Live Demo

<!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