Left and Right Alignment of Containers with CSS Flex

With flex, we can easily create left-right alignment of containers. The flexible items are displayed horizontally using the flex-direction property. The flexible items have a space between them since the justify-content is set to space-between. The following examples illustrate CSS flex property.

Align with Flex Direction

The div container is set to the flex value using the display property. The flex-direction allow the flex items to display horizontally −

flex-direction: row;

Example

Let us see the example −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style> 
      #container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin: 2%;
         padding: 15%;
         align-self: center;
         background: url("https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=stretch&w=600&q=80");
         color: white;
      }
      div > div {
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <div id="container">
      <div>Left</div>
      <div>Right</div>   
   </div>
</body>
</html>

Align with Flex Flow

To align with flex flow, you need to know that it is a combination of the flex-direction and flex-wrap. The flex-direction is used to set the direction of the flex items whereas flex-wrap sets whether the flex items should wrap or not.

Here, the value for the flex-flow is column wrap i.e., the items are displayed vertically with flex-direction and wraps using value wrap −

flex-flow: column wrap;

Example

Let us see the example −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style> 
      #container {
         height: 250px;
         display: flex;
         flex-flow: column wrap;
         padding: 2%;
         background: url("https://images.unsplash.com/photo-1523830213227-f76e0415a976?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=60") 0;
      }
      img {
         margin: 2%;
         width: 60px; 
         border-radius: 25%;
      }
   </style>
</head>
<body>
   <div id="container">
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
      <img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
   </div>
</body>
</html>
Updated on: 2023-12-14T17:36:36+05:30

248 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements