Advance CSS layout with flexbox

CSS Web Development Front End Technology

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

Here are all the Flexbox examples in a single image. It uses the flex, flex-wrap, justify-content, align-items, etc. −

Style the Parent Container

We have styled the parent container here. The flex container becomes flexible by setting the display property to flex −

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

Flex Items

The parent container is having three containers i.e. flex items −

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

Style Flex Item 1

The flex items are styled as the following, The align-self is set to flex-start so that the element is positioned at the beginning of the container −

.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;
}

Style Flex Item 2

The flex items are styled as the following. The jusitify-content is set to center to align the flex items at the center of the container −

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;
}

Style Flex Item 3

The flex items are styled as the following. The flex-direction is set to column so that the flexible items are displayed vertically as a column −

.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;
}

CSS Layout With Flexbox

Example

The following is the code for advance CSS layout with flexbox −

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

AmitDiwan

Updated on: 27-Oct-2023

432 Views

Kickstart Your Career

Get certified by completing the course

Get Started