CSS3 Flexible Box Layouts

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties −

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

Set a Parent div

First, set a parent div and style the container with display flex. The flex container becomes flexible with display flex. Wrap the flex item with the flex-wrap: wrap −

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   background-color: lightblue;
}

Set the 1st Container

In the parent div, now set the first container.

<div class="container1">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

Now, style the first container. We have set display flex for the div. The flex container becomes flexible with display flex −

.container1 {
   align-self: flex-start;
   display: flex;
   background-color: rgb(71, 30, 255);
   width: 200px;
   margin: 20px;
}

Set the 2nd Container

In the parent div, set the second container −

<div class="container2">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

Now, style the second container. We have set display flex for the div. The flex container becomes flexible with display flex. Align the flex items with the justify-content property −

.container2 {
   display: flex;
   background-color: rgb(14, 126, 79);
   width: 200px;
   justify-content: center;
   align-self: flex-start;
   margin: 20px;
}

Set the 3rd Container

In the parent div, set the third container.

<div class="container3">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

Now, style the third container. We have set display flex for the div. The flex container becomes flexible with display flex: We have also set the flex direction here. The column value of the flex-direction stacks the flex items vertically (from top to bottom) −

.container3 {
   display: flex;
   flex-direction: column;
   background-color: rgb(168, 60, 10);
   width: 200px;
   align-items: center;
   margin: 20px;
}

Set the 4th Container

In the parent div, set the fourth container −

<div class="container4">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

Now, style the fourth container.

.container4 {
   background-color: rgb(26, 10, 168);
   width: 200px;
   margin: 20px;
}

Example

The following is the code displaying flexible layouts using CSS3 −

<!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,
   .container2 > div,
   .container3 > div,
   .container4 > 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;
   }
   .container3 {
      display: flex;
      flex-direction: column;
      background-color: rgb(168, 60, 10);
      width: 200px;
      align-items: center;
      margin: 20px;
   }
   .container4 {
      background-color: rgb(26, 10, 168);
      width: 200px;
      margin: 20px;
   }
   </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="container4">
         <div>1</div>
         <div>2</div>
         <div>3</div>
      </div>
   </div>
</body>
</html>

Updated on: 31-Oct-2023

106 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements