CSS flex Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The flex property in CSS is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

It is used to define how a flex item will grow or shrink to fit the space available in its flex container.

This property is a key component of the Flexbox layout model, which is designed to provide a more efficient way to lay out, align, and distribute space among items in a container.

💡 Syntax

The syntax for the flex property is:

Syntax

Copied

element {
  flex: flex-grow flex-shrink flex-basis;
}

Each value can be specified as follows:

flex-grow: A number specifying how much the item will grow relative to the rest of the flex items.
flex-shrink: A number specifying how much the item will shrink relative to the rest of the flex items.
flex-basis: The initial main size of the flex item, which can be a length (e.g., 20%, 5em, 30px) or the keyword auto.

🎛️ Default Value

The default value of the flex property is 0 1 auto, which means:

flex-grow: 0 (the item will not grow).
flex-shrink: 1 (the item will shrink if necessary).
flex-basis: auto (the item will use its natural size).

🏠 Property Values

Value	Description
flex-grow	A non-negative number. Default is 0.
flex-shrink	A non-negative number. Default is 1.
flex-basis	A length, percentage, or auto. Default is auto.

📄 Example

In this example, we'll create a simple flex container with three items and use the flex property to control their growth.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS flex Property Example</title>
  <style>
    .container {
      display: flex;
    }
    .item1 {
      flex: 1;
      background-color: lightcoral;
    }
    .item2 {
      flex: 2;
      background-color: lightblue;
    }
    .item3 {
      flex: 1;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <h1>Flex Container with Custom Flex Properties</h1>
  <div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The flex property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. This broad compatibility makes Flexbox a reliable choice for layout design across different platforms and devices.

🎉 Conclusion

The flex property is an essential part of the Flexbox layout model, providing a powerful and flexible way to control the size and distribution of flex items within a container.

By understanding and utilizing the flex property, you can create responsive and dynamic layouts that adapt to different screen sizes and content variations. Experiment with different flex values to see how they affect the layout and design of your web projects.