Flexbox - Flex Containers

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 −

Since we have given the value flex to the display property, the container uses the width of the container (browser).

You can observe this by adding a border to the container as shown below.

.container {
   display:inline-flex;
   border:3px solid black;
}

It will produce the following result −

Inline flex

On passing this value to the display property, an inline level flex container will be created. It just takes the place required for the content.

The following example demonstrates how to create an inline flex container. Here, we are creating six boxes with different colors and we have used the inline-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:inline-flex;
         border:3px solid black;
      }
      .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 −

Since we have used an inline flex container, it just took the space that is required to wrap its elements.

Advertisements