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.
flex − Generates a block level flex container.
inline-flex − Generates an inline flex container box.
inline-flex − Generates an inline flex container box.
Now, we will see how to use the display property with examples.
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.
<!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 −
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.
<!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.

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    87 Lectures 
     11 hours 

 Code And Create

    167 Lectures 
     45.5 hours 

 Muslim Helalee
 Print
 Add Notes
 Bookmark this page