CSS - flex Property

Quiz

CSS flex is a shorthand property for defining the values to properties flex-grow, flex-shrink and flex-basis. It defines how the flex items grow, shrink, and allocate space along the flex container. The element must be a flexible item in order for the property to show its effect.

Syntax

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

Property Values

Value	Description
flex-grow	A number specifying how much the item will grow relative to the rest of the flexible items
flex-shrink	A number specifying how much the item will shrink relative to the rest of the flexible items.
flex-basis	It specifies the length of the item in length values (e.g. auto,%,px,em etc.)
auto	The item's size is determined by its width and height properties, expands to fill extra space in the flex container, and shrink to its minimum size to fit the container. It is equal to flex: 1 1 auto.
none	The item's size remains fixed and does not expand or shrink when the flex container's dimensions change. It is equal to flex: 0 0 auto.
initial	The item is sized according to its width and height properties. It is equivalent to flex: 0 1 auto.
inherit	It inherits the property from the parent element.

Examples of CSS Flex Property

The following examples explain the flex property with different values.

Defining All Values of Flex Property

The flex property is a combination of properties flex-grow, flex-shrink and flex-basis, the values to all these properties can be given in a single statement. The elements will be adjusted accordingly. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         height: 100px;
         border: 1px solid black;
      }

      .item {
         border: 3px solid grey;
         padding: 10px;
         color: white;
         text-align: center;
      }

      .item1 {
         flex: 1 1 100px;
         background-color: lightblue;
      }

      .item2 {
         flex: 2 1 150px;
         background-color: lightgreen;
      }

      .item3 {
         flex: 1 2 200px;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: flex-grow flex-shrink flex-basis
   </h4>
   <div class="container">
      <div class="item item1">
         Item 1
      </div>
      <div class="item item2">
         Item 2
      </div>
      <div class="item item3">
         Item 3
      </div>
   </div>
</body>

</html>

Flex Property with Single Value

We can also provide a single integer value to the flex property. This value sets the flex-grow factor of the element, making it grow relative to other flex items. The flex-shrink and flex-basis properties default to 1 and auto, respectively. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         text-align: center;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
      }

      .flex-item2 {
         flex: 2;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: 2 (The second item takes up 2x
      the space of the other flex items)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

Flex Property with Auto Value

To let the flex items grow and shrink equally to fill the available space of the container, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
         flex: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: auto (all items fill the available
      container space)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div>
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

Flex Property with None Value

To prevent the flex items to grow and shrink equally to fill the available space of the container, we use the none value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
         flex: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: none (all items' size remains fixed)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div>
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page