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

The display property specifies how an element should be displayed in 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, 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 they can. Block-level elements do not appear in the same line, but breaks the existing line and appear in the next line.
  • Flex: Flex displays an element as a flexible structure. To use 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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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 it’s content maintains its flexbox properties. In the below picture, the flex container comprises Computer, Science, Portal, and the yellow area.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

There is only one main difference between the inline-block and inline-flex:
inline-block: Create specific block for each element under it’s section maintian the structure of each element.
inline-flex: Does not reserved any specific space in normal form.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.