Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The display property specifies how an element should be displayed on a webpage. There can be many values, related to this property in CSS. Inline-block and inline-flex are two such properties. Although there are several values that this property can have, to understand the aforementioned, let us first look into three other values: inline, block, and flex. 

  • Inline: Just as the name suggests, inline displays an element in the same line as the rest. Specifying any height and width properties will be of no use, as it follows the height and width of the line, of which it is a part.
  • Block: Displays an element as a block element. It starts on a new line and takes up take up as much horizontal space as it can. Block-level elements do not appear in the same line but break the existing line and appear in the next line.
  • Flex: Flex displays an element as a flexible structure. To use a flex display, a flex-level container has to be created. Flex level container is nothing, but an element with the display property set to flex. The flex container itself is displayed in a new line, just like the block element. The flex container can contain other elements in it and thus, the flex container is the parent element and the elements that are part of it are the child elements. Display flex property helps us to align and distribute space among items in a container, even when their size is unknown and/or dynamic.

Inline-Block: Displays an element as an inline-level block container. An element set to inline-block is very similar to inline in that it will be set in line with the natural flow of text, i.e; unlike display: block, display:inline-block does not add a line-break after the element. So, the element can sit next to other elements. The element itself is formatted as an inline element, but it allows you to set a width and height on the element, which is not possible in the display: inline

Example: In this example, we are using the above-explained method.

html




<!DOCTYPE html>
<html>
<title>CSS inline-block</title>
<style>
    body {
        text-align: center;
        font-size: 28px;
    }
 
    h1 {
        color: green;
    }
</style>
 
<body>
    <h1>GeeksforGeeks</h1> A Online
    <div style="display:inline-block;
                background-color:yellow;
                width:auto;
                height:auto">
        <div style="display:inline;
                    background-color:purple;">
            Computer
        </div>
        <div style="display:inline;
                    background-color:orange;">
            Science
        </div>
        <div style="display:inline;
                    background-color:cyan;">
            Portal
        </div>
    </div>
    for Geeks
</body>
</html>


Output: 

 

Inline-flex: Displays an element as an inline-level flex container. The display:inline-flex does not make flex items display inline. It makes the flex container display inline. The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties. In the below picture, the flex container comprises Computer, Science, Portal, and the yellow area. 

Example: In this example, we are using the above-explained method.

html




<!DOCTYPE html>
<html>
<title>CSS inline-block</title>
<style>
    body {
        text-align: center;
        font-size: 28px;
    }
 
    h1 {
        color: green;
    }
</style>
 
<body>
    <h1>GeeksforGeeks</h1> A Online
    <div style="display:inline-flex;
                background-color:yellow;
                width:auto;
                height:auto">
        <div style="display:inline;
                    background-color:purple;">
            Computer
        </div>
        <div style="display:inline;
                    background-color:orange;">
            Science
        </div>
        <div style="display:inline;
                    background-color:cyan;">
            Portal
        </div>
    </div>
    for Geeks
</body>
</html>


Output: 

 

There is only one main difference between the inline-block and inline-flex

  • inline-block: Create a specific block for each element under its section to maintain the structure of each element. 
  • inline-flex: Does not reserve any specific space in normal form.

CSS is the foundation of webpages, and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



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