Difference between inline-flex and inline-block in CSS

This article is created to differentiate between inline-flex and inline-block, the two values used to define the display property in CSS.

The display: inline-flex creates inline-level flex container. Whereas the display: inline-block creates inline-level block container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .one{display: inline-flex;}
      .two{display: inline-block;}
   </style>
</head>
<body>

   <h2>Without inline-flex and inline-block</h2>
   <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>

   <h2>display: inline-flex</h2>
   <div class="one">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   <div class="one">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>

   <h2>display: inline-block</h2>
   <div class="two">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   <div class="two">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>

</body>
</html>

Output

Without inline-flex and inline-block

display: inline-flex

display: inline-block

CSS Online Test

« Previous Tutorial Next Tutorial »