CSS flex

The CSS flex property is used as shorthand of flex-grow, flex-shrink, and flex-basis properties. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex;}
      .container > div{border: 1px solid coral; padding: 12px;}
      #secondiv{flex: 0 0 180px;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS flex Syntax

The syntax of flex property in CSS, is:

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Note - To define flex-grow and flex-shrink, we use numbers like 1, 2, 3, etc. Whereas to define flex-basis, we use length, e.g. 200px

When we use auto, then the property is defined in this way:

flex: 1 1 auto

When we use initial, the property is defined in this way:

0 1 auto

When we use none, the property is defined in this way:

0 0 auto

And we use inherit to use the value inherited by the parent element.

CSS Online Test

« Previous Tutorial Next Tutorial »