Open In App

What is the difference between display:inline-flex and display:flex in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the display property & its values, i.e. the inline-flex & flex, in order to specify the display behavior of an element, along with understanding their basic differences & will illustrate them through the examples.

Both CSS display: inline-flex and display: flex properties are used to create flexible layouts.

The display: inline-flex property will make the element a flexbox container and the container will be inline. They can adjust their size. The items inside the container are also inline. The display: flex property will make the items of the container inline but the container will block the whole row. The items in the container can adjust their size.

 

Syntax: 

display: value;

Example 1: The following example shows a case that does not use the display property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Display property</title>
    <style>
        .item1 {
            height: 80px;
            width: 150px;
            background: teal;
            display: block;
        }
  
        .item2 {
            height: 80px;
            width: 150px;
            background: cyan;
            display: block;
        }
  
        .item3 {
            height: 80px;
            width: 150px;
            background: green;
            display: block;
        }
  
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 20px;
            margin-top: 5px;
        }
  
        #sub-heading {
            margin-left: 35px;
        }
  
        .container {
            margin: 50px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div id="heading">GeeksforGeeks</div>
    <h3  id="sub-heading">Display properties</h3>
    <div class="container">
        <div class="item1">Box 1 </div>
        <div class="item2">Box 2</div>
        <div class="item3">Box 3</div>
    </div>
    <div class="container">
        <div class="item1">Box 1 </div>
        <div class="item2">Box 2</div>
        <div class="item3">Box 3</div>
    </div>
</body>
  
</html>


Output:

 

Example 2: The following code demonstrates the display: flex property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Display property</title>
    <style>
            
        .item1 {
            height: 80px;
            width: 150px;
            background: teal;
            display: block;
        }
  
        .item2 {
            height: 80px;
            width: 150px;
            background: cyan;
            display: block;
        }
  
        .item3 {
            height: 80px;
            width: 150px;
            background: green;
            display: block;
        }
  
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 130px;
        }
  
        #sub-heading {
            margin-left: 180px;
        }
  
        .container {
            margin: 50px;
            text-align: center;
            display: flex;
        }
    </style>
</head>
  
<body>
    <div id="heading">GeeksforGeeks</div>
    <h3 id="sub-heading">Display properties</h3>
    <div class="container">
        <div class="item1">Box 1 </div>
        <div class="item2">Box 2</div>
        <div class="item3">Box 3</div>
    </div>
    <div class="container">
        <div class="item1">Box 1 </div>
        <div class="item2">Box 2</div>
        <div class="item3">Box 3</div>
    </div>
</body>
  
</html>


Output:

 

Example 3: The following code demonstrates the display: inline-flex property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Display property</title>
    <style>
            
        .item1 {
            height: 80px;
            width: 150px;
            background: teal;
            display: block;
        }
  
        .item2 {
            height: 80px;
            width: 150px;
            background: cyan;
            display: block;
        }
  
        .item3 {
            height: 80px;
            width: 150px;
            background: green;
            display: block;
        }
  
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 400px;
          
        }
  
        #sub-heading {
            margin-left: 470px;
          
        }
  
        .container {
            margin: 50px;
            text-align: center;
            display: inline-flex;
        }
    </style>
</head>
  
<body>
    <div id="heading">GeeksforGeeks</div>
    <h3  id="sub-heading">Display properties</h3>
    <div class="container">
        <div class="item1">Box 1 </div>
        <div class="item2">Box 2</div>
        <div class="item3">Box 3</div>
    </div>
    <div class="container">
        <div class="item1">Box 1 </div>
        <div class="item2">Box 2</div>
        <div class="item3">Box 3</div>
    </div>  
</body>
  
</html>


Output:

 

Difference between inline-flex and flex:

display: inline-flex display: flex
It behaves like an inline element with respect to the parent element. It behaves like a block element with respect to the parent element.
It only takes up the necessary space required by its content. It takes up the full width of its container.
It sets the cross-axis to vertical by default. It can have a vertical or horizontal cross-axis.
It is commonly used for block-level elements such as buttons, navigation menus, etc. It is commonly used for block-level elements such as divs, sections, etc.


Last Updated : 10 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads