Difference between flex and inline-flex in CSS

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

The display: flex is used to create a flex container, where childrens of flex container becomes flex items, and all flex items becomes flexible to flow both vertically and horizontally. Whereas the display: inline-flex does similar job as of display: flex, except that, it deals with flex containers, not flex items. For example:

HTML with CSS Code

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

   <h2>Without flex and inline-flex</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: 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-flex</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 flex and inline-flex

display: flex

display: inline-flex

CSS Online Test

« Previous Tutorial Next Tutorial »