Mastering CSS Flex-Basis A Comprehensive Guide

Introduction

The flex-basis property in CSS is a key part of the Flexbox layout. It sets the initial size of a flex item before any space distribution happens based on the flex-grow or flex-shrink properties. This is super useful for creating responsive designs that work well on different devices.

flex-basis was introduced in September 2015 and works well across most browsers. It’s a good idea to use the flex shorthand, which combines flex-grow, flex-shrink, and flex-basis, for simpler and cleaner code.

Specification

flex-basis is part of the CSS Flexible Box Layout Module Level 1. This module helps lay out, align, and distribute space among items in a container, even if their size is unknown or dynamic.

Specification Details:

• Module: CSS Flexible Box Layout Module Level 1
• Property: flex-basis
• Definition: CSS Flexible Box Layout Module Level 1 - flex-basis property

Description

flex-basis sets the initial size of a flex item before any distribution of extra space. It’s crucial for controlling the layout of flex items within a flex container. You can use length units, percentages, or intrinsic sizing keywords to set the size.

Using flex-basis with flex-grow and flex-shrink helps create dynamic layouts that adapt to different screen sizes. It sets the size of the content box unless otherwise specified with the box-sizing property.

Syntax

The flex-basis property sets the initial main size of a flex item. Here’s the basic syntax:

flex-basis: <'width'> | auto | content | max-content | min-content | fit-content | inherit | initial | unset;

Examples:

  /* Specify a fixed length */
  flex-basis: 10em;
  flex-basis: 3px;
  flex-basis: 50%;

  /* Use the 'auto' keyword */
  flex-basis: auto;

  /* Use intrinsic sizing keywords */
  flex-basis: max-content;
  flex-basis: min-content;
  flex-basis: fit-content;

  /* Automatically size based on the flex item's content */
  flex-basis: content;

  /* Use global values */
  flex-basis: inherit;
  flex-basis: initial;
  flex-basis: revert;
  flex-basis: revert-layer;
  flex-basis: unset;

Values

flex-basis can take various values, including length units, percentages, and intrinsic sizing keywords.

1. <‘width’>

• Length Units (<length>): Sets an absolute value using units like px, em, rem, etc.

  flex-basis: 10em;
  flex-basis: 3px;

• Percentages (<percentage>): Sets a percentage of the width or height of the containing block’s content area.

  flex-basis: 50%;

2. auto

The auto value uses the value of the width property in horizontal writing mode and the value of the height property in vertical writing mode. If these values are also auto, the content value is used instead.

flex-basis: auto;

3. max-content

This keyword sets the intrinsic preferred width of the flex item.

flex-basis: max-content;

4. min-content

This keyword sets the intrinsic minimum width of the flex item.

flex-basis: min-content;

5. fit-content

This keyword sets the maximum possible size of a containing block’s content area, bounded by the min-content and max-content values, and calculated based on the content of the current element.

flex-basis: fit-content;

6. content

This keyword indicates automatic sizing based on the flex item’s content.

flex-basis: content;

7. Global Values

• inherit: Inherits the value from the parent element.

  flex-basis: inherit;

• initial: Sets the property to its default value (auto).

  flex-basis: initial;

• revert: Resets the property to the user agent’s default value.

  flex-basis: revert;

• revert-layer: Resets the property to the value specified in the next outer CSS layer.

  flex-basis: revert-layer;

• unset: Resets the property to its natural value.

  flex-basis: unset;

Formal Definition

The flex-basis property is formally defined in the CSS Flexible Box Layout Module Level 1. It’s crucial for determining the initial size of a flex item.

Initial Value:

• The initial value for flex-basis is auto.

Applies To:

• The flex-basis property applies to flex items, including in-flow pseudo-elements.

Inherited:

• This property is not inherited from the parent element.

Percentages:

• Percentages refer to the flex container’s inner main size.

Computed Value:

• The computed value is as specified, but with relative lengths converted into absolute lengths.

Animation Type:

• The animation type for flex-basis is a length, percentage, or calc().

Examples

Here are some practical examples to help you understand how flex-basis works.

Setting Flex Item Initial Sizes

HTML

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS

.flex-container {
  display: flex;
}

.flex-item {
  flex-basis: 200px; /* Initial size of each flex item */
  border: 1px solid black;
  padding: 10px;
}

In this example, each flex item will start with a width of 200px.

Using Percentages

HTML

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS

.flex-container {
  display: flex;
}

.flex-item {
  flex-basis: 33.33%; /* Each item takes up one-third of the container's width */
  border: 1px solid black;
  padding: 10px;
}

In this example, each flex item will take up one-third of the container’s width.

Using Intrinsic Sizing Keywords

HTML

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS

.flex-container {
  display: flex;
}

.flex-item {
  flex-basis: max-content; /* Each item's size is based on its content */
  border: 1px solid black;
  padding: 10px;
}

In this example, each flex item’s size is determined by its content.

Flex Basis Examples

HTML

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

CSS

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 12px;
}

.flex1 {
  flex-basis: auto;
}

.flex1::after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2::after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3::after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4::after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5::after {
  content: "content";
}

Explanation

In this example, we have a flex container with several flex items. Each flex item has a different flex-basis value:

• auto: The flex item’s size is determined by its content.
• max-content: The flex item’s size is set to its intrinsic preferred width.
• min-content: The flex item’s size is set to its intrinsic minimum width.
• fit-content: The flex item’s size is bounded by min-content and max-content.
• content: The flex item’s size is based on its content.

Flex Basis 0 vs 0%

HTML

<div class="container basis-0">
  <div>heading</div>
  <section>
    flex-basis: 0;
    <div class="content"></div>
  </section>
</div>
<div class="container basis-0-percent">
  <div>heading</div>
  <section>
    flex-basis: 0%;
    <div class="content"></div>
  </section>
</div>

CSS

.container {
  width: 40vw;
  padding: 1rem;
  border: 1px dashed blue;
  display: inline-flex;
  flex-direction: column;
}

section {
  border: 1px solid red;
  overflow: auto;
  min-height: 200px;
}

.content {
  background: wheat;
  height: 300px;
}

.container.basis-0 > * {
  flex-basis: 0;
}

.container.basis-0-percent > * {
  flex-basis: 0%;
}

Explanation

In this example, we have two flex containers with similar structures but different flex-basis values for their flex items:

• In the first container (basis-0), the flex-basis value is set to 0. This means the flex item has an initial main size of zero and will grow to fill the available space.
• In the second container (basis-0-percent), the flex-basis value is set to 0%. This means the flex item has an initial main size based on the content, as the percentage value resolves to the content value when the flex container’s size is indefinite.

Summary

These examples demonstrate how the flex-basis property can be used to control the initial size of flex items within a flex container. By understanding and effectively utilizing flex-basis, web developers can create flexible and responsive layouts that adapt well to different screen sizes and content requirements.

Browser Compatibility

The flex-basis property is widely supported across modern browsers, ensuring that developers can rely on it for creating flexible and responsive layouts. Here’s a detailed overview of the browser compatibility for flex-basis:

Desktop Browsers

• Google Chrome: Supported since version 29.0 (August 2013).
• Mozilla Firefox: Supported since version 28.0 (March 2014).
• Internet Explorer / Edge: Supported since version 11.0 (October 2013).
• Opera: Supported since version 17.0 (August 2013).
• Safari: Supported since version 9.0 (September 2015).

Mobile Browsers

• Android WebView: Supported since version 4.4.
• Chrome for Android: Supported since version 29.0.
• Firefox for Android: Supported since version 28.0.
• Opera Mobile: Supported since version 12.1.
• Safari on iOS: Supported since version 9.0.
• Samsung Internet: Supported since version 4.0.

Summary of Browser Compatibility

The flex-basis property is well-established and has been available across browsers since September 2015. This broad compatibility makes it a reliable choice for creating flexible and responsive web designs.

Important Notes

• While flex-basis is widely supported, it is recommended to use the flex shorthand property for a more streamlined and efficient coding process. The flex shorthand combines flex-grow, flex-shrink, and flex-basis, simplifying the declaration of these properties.
• To ensure the best performance and compatibility, always test your layouts across different browsers and devices.

Conclusion

The flex-basis property is a powerful tool for controlling the initial size of flex items within a flex container. Its broad compatibility across modern browsers makes it an essential part of any web developer’s toolkit. By understanding and effectively utilizing flex-basis, you can create flexible and responsive layouts that enhance user experiences across different devices and screen sizes.

See Also

For further exploration and understanding of related CSS properties and concepts, you may find the following resources useful:

1. flex Shorthand Property

   • The flex shorthand property combines flex-grow, flex-shrink, and flex-basis into a single declaration, simplifying the process of defining flexible items.
   • WebsiteUrl

2. inline-size Property

   • The inline-size property represents the size of an element along the inline axis, which can be particularly useful in conjunction with flex-basis.
   • WebsiteUrl

3. Basic Concepts of Flexbox

   • Understanding the basic concepts of Flexbox is crucial for effectively using properties like flex-basis. This resource provides an overview of Flexbox fundamentals.
   • WebsiteUrl

4. Controlling Ratios of Flex Items Along the Main Axis

   • This guide delves into how to control the ratios of flex items along the main axis using flex-grow, flex-shrink, and flex-basis.
   • WebsiteUrl

5. CSS Flexible Box Layout Module

   • The Flexible Box Layout Module defines the Flexbox layout model, which includes properties like flex-basis. This specification is essential for understanding the underlying principles of Flexbox.
   • WebsiteUrl

6. HTML Layout Tutorial

   • While focused on HTML, this tutorial also includes valuable insights into CSS layout techniques, including Flexbox.
   • WebsiteUrl

7. CSS Flexbox Tutorial

   • This comprehensive tutorial covers the basics and advanced topics of Flexbox, providing practical examples and best practices.
   • WebsiteUrl

8. CSS Box Model

   • Understanding the CSS Box Model is fundamental for working with properties like flex-basis. This resource explains the box model in detail.
   • WebsiteUrl

9. CSS Grid Layout

   • While flex-basis is specific to Flexbox, CSS Grid Layout offers another powerful way to create complex layouts. Understanding both Flexbox and Grid can enhance your layout capabilities.
   • WebsiteUrl

10. CSS Positioning

    • Understanding CSS positioning is crucial for creating responsive layouts. This resource provides a comprehensive overview of CSS positioning techniques.
    • WebsiteUrl

By exploring these related resources, you can deepen your understanding of CSS layout techniques and enhance your ability to create responsive and flexible web designs. These resources provide a comprehensive guide to the essential concepts and properties that complement the flex-basis property, ensuring that you are well-equipped to tackle any layout challenge in your web development projects.