Flexbox – Flex Containers


Flexbox – Flex Containers

”;


Previous

Next

To use Flexbox in your application, you need to create/define a flex container using the display property.

Usage −

display: flex | inline-flex

This property accepts two values

  • flex − Generates a block level flex container.

  • inline-flex − Generates an inline flex container box.

Now, we will see how to use the display property with examples.

Flex

On passing this value to the display property, a block level flex container will be created. It occupies the full width of the parent container (browser).

The following example demonstrates how to create a block level flex container. Here, we are creating six boxes with different colors and we have used the flex container to hold them.

Live Demo 
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

It will produce the following result −