CSS Flexbox Layout Module


Even though CSS was designed to handle styling, web developers have always had a special issue when developing remarkable layouts, which nearly always requires the use of JavaScript. But Flexbox is here to make that different.

For getting better understanding on the CSS flexbox layout module, let's dive into the article.

CSS Flexbox

Developers can design adaptable and flexible web page layouts with the help of the flexible property, which is an adaptable command. This property removes the need to define exact dimensions by allowing webpage elements to be sized and positioned relative to one another.

Because it lets items adjust to the size of the screen, the flex property is especially helpful for responsive design. For example, by adjusting the flex-direction property from row to column, one can effortlessly rearrange a row of images on a desktop screen into a column on a mobile device.

Example

Let's look at the following example, where we are going to use the CSS flex direction property.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: verdana;
         font-size: 20px;
         color: #17202A;
         background-color: #D5F5E3;
      }
      .tp {
         width: 250px;
         height: 100px;
         border: 1px solid #8E44AD;
         display: flex;
      }
      .rect {
         width: 60px;
         height: 30px;
      }
      #row {
         flex-direction: row;
      }
      .a {
         background-color: #DFFF00;
      }
      .b {
         background-color: #40E0D0;
      }
      .c {
         background-color: #D35400;
      }
   </style>
</head>
<body>
   <h2>row flex-direction</h2>
   <div id="row" class="tp">
      <div class="rect a">X</div>
      <div class="rect b">Y</div>
      <div class="rect c">Z</div>
   </div>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with a div box displayed on the webpage.

Example

Considering another scenario, where we are going to use the CSS flex wrap property.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: verdana;
         font-size: 20px;
         color: #DE3163;
         background-color: #E8DAEF;
      }
      .tp div {
         height: 40px;
         color: #6C3483;
         width: 250px;
         text-align: center;
      }
      .x {
         background: yellow;
      }
      .y {
         background: lightgray;
      }
      .z {
         background: tomato;
      }
      .tp {
         display: flex;
         flex-wrap: wrap;
      }
   </style>
</head>
<body>
   <h4>CSS flex-wrap:wrap</h4>
   <div class="tp">
      <div class="x">A</div>
      <div class="y">B</div>
      <div class="z">C</div>
   </div>
</body>
</html>

On running the above code, the output window will pop up displaying the div box on the webpage along with a text.

Example

In the following example, we are going to use the CSS flex grow property.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: verdana;
         font-size: 15px;
         color: #DE3163;
         background-color: #D5F5E3;
      }
      #tp {
         display: flex;
         justify-content: space-around;
         flex-flow: row wrap;
         align-items: stretch;
      }
      .x1 {
         flex-grow: 2;
         border: 3px solid #A569BD;
      }
      .x2 {
         flex-grow: 3;
         border: 3px solid #A569BD;
      }
   </style>
</head>
<body>
   <h3>A,B are flex-grow:2, D and E are flex-grow:3</h3>
   <div id="tp">
      <div class="x1" style="background-color:yellow;">A</div>
      <div class="x1" style="background-color:lightgray;">B</div>
      <div class="x2" style="background-color:LightCoral;">D</div>
      <div class="x2" style="background-color:#40E0D0;">E</div>
   </div>
</body>
</html>

When we run the above code, it will generate an output consisting of the div box used with flex-grow displayed on the webpage.

Updated on: 08-Jan-2024

189 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements