CSS flex-basis 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-basis property in CSS is used in the context of Flexbox layouts. It defines the initial main size of a flex item before any space distribution happens.

This property helps in determining the starting size of an item within a flex container, which can be different from the final size after the flexbox algorithm has been applied.

💡 Syntax

The syntax for the flex-basis property is simple and can be specified in various units such as pixels, percentages, or the keyword auto.

Syntax

Copied

element {
  flex-basis: value;
}

Here, value can be a length value (e.g., px, em, rem), a percentage, or the keyword auto.

🎛️ Default Value

The default value of the flex-basis property is auto, which means the size of the flex item is based on its content.

🏠 Property Values

Value	Description
length	Specifies a fixed size for the flex item (e.g., 100px, 2em).
percentage	Specifies a size relative to the flex container's main size (e.g., 50%).
auto	The browser calculates the size based on the item's content.
content	Size based on the content (not widely supported yet).

📄 Example

In this example, we'll set the flex-basis of the flex items to different values to see how it affects their initial size.

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-basis Example</title>
  <style>
    .container {
      display: flex;
      border: 1px solid #000;
      padding: 10px;
    }
    .item {
      background-color: #8bc34a;
      padding: 10px;
      margin: 5px;
      color: white;
      text-align: center;
    }
    .item1 {
      flex-basis: 200px;
    }
    .item2 {
      flex-basis: 30%;
    }
    .item3 {
      flex-basis: auto;
    }
  </style>
</head>
<body>
  <h1>Flexbox with flex-basis Property</h1>
  <div class="container">
    <div class="item item1">200px</div>
    <div class="item item2">30%</div>
    <div class="item item3">Auto</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The flex-basis property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is safe to use in most web projects, but as always, testing across different browsers is recommended to ensure compatibility.

🎉 Conclusion

The flex-basis property is a crucial part of creating flexible and responsive layouts using CSS Flexbox. By defining the initial main size of a flex item, you can control how your flex items are displayed before any additional space is distributed.

This property, along with others in the Flexbox module, provides powerful tools for building modern web layouts that adapt to different screen sizes and content requirements.