The `flex-basis` | `flex-grow` | `flex-shrink` property in CSS

he flex-basis property in CSS defines the initial main size of a flex item, before any available space is distributed according to the flex factors.

Here’s a bit more detail:

Default Value (auto):
- When flex-basis is set to auto (which is its default value), the size of the flex item is based on its content. This means the width (or height, depending on the flex direction) of the element is determined by its content and any set width or height properties.
Setting a Fixed Value (e.g., 50px):
- When you explicitly set a value for flex-basis (e.g., 50px), this value will be used as the initial size of the flex item. The size will be fixed to this value, and it will not be based on the content. Any extra space in the container will be distributed according to the flex-grow and flex-shrink properties.

Here's an example to illustrate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Basis Example</title>
    <style>
        .container {
            display: flex;
            border: 1px solid #000;
        }
        .item {
            border: 1px solid red;
        }
        .auto {
            flex-basis: auto;
        }
        .fixed {
            flex-basis: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item auto">Auto</div>
        <div class="item fixed">Fixed</div>
    </div>
</body>
</html>

In this example:

The Auto item will size itself based on its content.
The Fixed item will be exactly 50px wide regardless of its content.

`flex-basis` to a percentage

Setting flex-basis to a percentage will make the flex item take that percentage of the container's main size. Here's how it works:

Percentage Value (e.g., 50%):
- When you set flex-basis to 50%, the flex item will take up 50% of the flex container's main size (width if the flex direction is row, height if the flex direction is column).
- The space distribution will still respect the flex-grow and flex-shrink properties, but the initial size of the item will be the specified percentage of the container.

Here's an updated example to illustrate this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Basis Percentage Example</title>
    <style>
        .container {
            display: flex;
            border: 1px solid #000;
            width: 100%; /* or any specific width */
            height: 200px; /* added height for illustration */
        }
        .item {
            border: 1px solid red;
        }
        .half {
            flex-basis: 50%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item half">50%</div>
        <div class="item half">50%</div>
    </div>
</body>
</html>

In this example:

Each .half item will take up 50% of the container's width, so they will be side by side, each occupying half the container's width.

Key Points

Percentage values for flex-basis are relative to the size of the flex container.
If the total of the flex-basis values exceeds 100% (e.g., you have three items each with flex-basis: 50%), they will overflow the container and wrap (if wrapping is enabled with flex-wrap: wrap) or be squeezed according to the flex-shrink values.
The flex-grow and flex-shrink properties still apply, so available space or overflow will be distributed according to these properties.

This allows for flexible and responsive designs where the size of the flex items adapts to the container size.

When flex-basis` values of flex items in a flex container exceed 100%

If the total flex-basis values of flex items in a flex container exceed 100%, how the items are displayed depends on several factors, including the flex-wrap property and the flex-shrink property.

Without Flex Wrap

If flex-wrap is set to nowrap (which is the default value), the flex items will not wrap and will instead shrink to fit within the container. The shrinking is governed by the flex-shrink property.

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Basis Exceeds 100% - No Wrap</title>
    <style>
        .container {
            display: flex;
            flex-wrap: nowrap; /* default value */
            border: 1px solid #000;
            width: 100%;
        }
        .item {
            border: 1px solid red;
        }
        .item1 {
            flex-basis: 60%;
        }
        .item2 {
            flex-basis: 60%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">60%</div>
        <div class="item item2">60%</div>
    </div>
</body>
</html>

In this example:

Both items have flex-basis set to 60%.
Since flex-wrap is nowrap, the items will shrink to fit within the container, potentially making them smaller than their flex-basis values.

With Flex Wrap

If flex-wrap is set to wrap, the flex items will wrap onto multiple lines to fit within the container.

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Basis Exceeds 100% - With Wrap</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #000;
            width: 100%;
        }
        .item {
            border: 1px solid red;
        }
        .item1 {
            flex-basis: 60%;
        }
        .item2 {
            flex-basis: 60%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">60%</div>
        <div class="item item2">60%</div>
    </div>
</body>
</html>

In this example:

Both items have flex-basis set to 60%.
Since flex-wrap is wrap, the first item will take up 60% of the width, and the second item will wrap onto a new line and take up 60% of the width.

Flex Shrink

If flex-wrap is nowrap, the flex-shrink property determines how the items shrink to fit into the container. The default value for flex-shrink is 1, which means items will shrink proportionally.

Here’s an example illustrating flex-shrink:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Shrink Example</title>
    <style>
        .container {
            display: flex;
            border: 1px solid #000;
            width: 100%;
        }
        .item {
            border: 1px solid red;
        }
        .item1 {
            flex-basis: 60%;
            flex-shrink: 1; /* default value */
        }
        .item2 {
            flex-basis: 60%;
            flex-shrink: 2; /* will shrink more than item1 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">60%</div>
        <div class="item item2">60%</div>
    </div>
</body>
</html>

In this example:

item1 and item2 both have flex-basis set to 60%.
item1 has a flex-shrink value of 1, and item2 has a flex-shrink value of 2.
item2 will shrink twice as much as item1 to fit within the container.

Summary

Without flex-wrap: Items will shrink to fit within the container, based on their flex-shrink values.
With flex-wrap: Items will wrap onto multiple lines to fit within the container.
Percentage values exceeding 100%: Will either cause shrinking or wrapping, depending on the flex-wrap property.

This flexibility allows for responsive and adaptive layouts using flexbox.

Understanding `flex-grow` in CSS

The flex-grow property is part of the Flexible Box Layout (flexbox). It defines how much a flex item should grow relative to the other flex items inside the same container when there's extra space available.

Basic Concept

flex-grow: 0;: The item will not grow. This is the default value.
flex-grow: 1;: The item will grow to fill the available space proportionally. If all items have flex-grow: 1;, they will all grow equally.
flex-grow: 2;: The item will grow twice as much as an item with flex-grow: 1;.

Example

Let’s illustrate with an example.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Grow Example</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            border: 2px solid #000;
        }
        .item {
            padding: 10px;
            border: 1px solid red;
        }
        .item-1 {
            flex-grow: 1;
        }
        .item-2 {
            flex-grow: 2;
        }
        .item-3 {
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-1">Item 1</div>
        <div class="item item-2">Item 2</div>
        <div class="item item-3">Item 3</div>
    </div>
</body>
</html>

Explanation

Container:
- display: flex; makes the container a flexbox container.
- width: 100%; ensures the container takes up the full width of its parent.
Items:
- .item-1 has flex-grow: 1;, meaning it will grow to fill the available space proportionally.
- .item-2 has flex-grow: 2;, meaning it will grow twice as much as .item-1.
- .item-3 has flex-grow: 3;, meaning it will grow three times as much as .item-1.

Visualization

Given the available space, the items will grow in proportion to their flex-grow values:

Item 1: Will take 1 part of the available space.
Item 2: Will take 2 parts of the available space.
Item 3: Will take 3 parts of the available space.

This means if there is 60% of the container’s width available (after accounting for margins, padding, etc.), the space would be divided as follows:

Item 1: 10% of the available space.
Item 2: 20% of the available space.
Item 3: 30% of the available space.

Additional Properties

The flex shorthand property allows you to define flex-grow, flex-shrink, and flex-basis in one line. For example:

.item {
    flex: 1 1 0%;
}

This is equivalent to:

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

Practical Usage

Using flex-grow is very handy in creating responsive layouts where elements should grow and fill the space dynamically. For instance, creating a navigation bar where items need to fill the space equally or proportionally.

Summary

flex-grow defines how much a flex item should grow relative to other items in the container.
Items with higher flex-grow values will grow more to fill the available space.
It’s used within a flex container to create dynamic, responsive layouts.

This fundamental understanding of flex-grow helps in effectively utilizing flexbox for responsive web design.

Understanding `flex-shrink` in CSS

The flex-shrink property is part of the Flexible Box Layout (flexbox). It defines the ability of a flex item to shrink if necessary when there's not enough space in the container.

Basic Concept

flex-shrink: 0;: The item will not shrink, even if there is not enough space in the container.
flex-shrink: 1;: The item will shrink proportionally if necessary. This is the default value.
flex-shrink: 2;: The item will shrink twice as much as an item with flex-shrink: 1;.

Example

Let’s illustrate with an example.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Shrink Example</title>
    <style>
        .container {
            display: flex;
            width: 300px; /* Limited width to demonstrate shrinking */
            border: 2px solid #000;
        }
        .item {
            padding: 10px;
            border: 1px solid red;
            width: 150px; /* Fixed width for items */
        }
        .item-1 {
            flex-shrink: 1;
        }
        .item-2 {
            flex-shrink: 2;
        }
        .item-3 {
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-1">Item 1</div>
        <div class="item item-2">Item 2</div>
        <div class="item item-3">Item 3</div>
    </div>
</body>
</html>

Explanation

Container:
- display: flex; makes the container a flexbox container.
- width: 300px; limits the container’s width to demonstrate shrinking.
Items:
- Each item has a fixed width of 150px.
- .item-1 has flex-shrink: 1;, meaning it will shrink proportionally.
- .item-2 has flex-shrink: 2;, meaning it will shrink twice as much as .item-1.
- .item-3 has flex-shrink: 3;, meaning it will shrink three times as much as .item-1.

Visualization

Given the limited container width of 300px and the total width of items (450px), the items will shrink to fit within the container. The shrinking will be proportional to their flex-shrink values:

Item 1: Will shrink the least.
Item 2: Will shrink twice as much as Item 1.
Item 3: Will shrink three times as much as Item 1.

Calculation

If we need to reduce the width by 150px (450px total width of items minus 300px container width):

Total Shrink Factor: 1 + 2 + 3 = 6
Shrink Unit: 150px / 6 = 25px
Item 1: Shrinks by 25px (1 * 25px)
Item 2: Shrinks by 50px (2 * 25px)
Item 3: Shrinks by 75px (3 * 25px)

So the resulting widths would be:

Item 1: 150px - 25px = 125px
Item 2: 150px - 50px = 100px
Item 3: 150px - 75px = 75px

Practical Usage

Using flex-shrink is useful when you want to control how flex items shrink when there is not enough space in the flex container. This can be particularly useful in responsive designs where you want some elements to shrink more or less than others.

Summary

flex-shrink defines the ability of a flex item to shrink when there is not enough space.
Items with higher flex-shrink values will shrink more than those with lower values.
It’s used within a flex container to manage space when the container size is smaller than the combined size of the flex items.

This fundamental understanding of flex-shrink helps in effectively utilizing flexbox for responsive web design, ensuring that items shrink proportionally as needed.

Flex Shorthand Properties for `flex-grow` , `flex-shrink` amd `flex-basis`

In both Tailwind CSS and standard CSS, you can use utility classes or shorthand properties to quickly apply flexbox properties. Here’s a breakdown of the provided classes and their equivalent CSS:

Tailwind CSS Utility Classes

These classes are predefined in Tailwind CSS to set flex properties.

flex-1:

<div class="flex-1">Content</div>

Equivalent CSS:

.flex-1 {
    flex: 1 1 0%;
}

flex-auto:

<div class="flex-auto">Content</div>

Equivalent CSS:

.flex-auto {
    flex: 1 1 auto;
}

flex-initial:

<div class="flex-initial">Content</div>

Equivalent CSS:

.flex-initial {
    flex: 0 1 auto;
}

flex-none:

<div class="flex-none">Content</div>

Equivalent CSS:

.flex-none {
    flex: none;
}

Standard CSS

In standard CSS, you can achieve the same effect by directly applying the flex property to elements.

flex: 1 1 0%:

<div style="flex: 1 1 0%;">Content</div>

Equivalent CSS:

.flex-1 {
    flex: 1 1 0%;
}

flex: 1 1 auto:

<div style="flex: 1 1 auto;">Content</div>

Equivalent CSS:

.flex-auto {
    flex: 1 1 auto;
}

flex: 0 1 auto:

<div style="flex: 0 1 auto;">Content</div>

Equivalent CSS:

.flex-initial {
    flex: 0 1 auto;
}

flex: none:

<div style="flex: none;">Content</div>

Equivalent CSS:

.flex-none {
    flex: none;
}

Explanation of Flex Shorthand Properties

flex: 1 1 0%:
- flex-grow: 1: The item can grow to fill the container.
- flex-shrink: 1: The item can shrink if necessary.
- flex-basis: 0%: The initial size of the item is 0% of the container.
flex: 1 1 auto:
- flex-grow: 1: The item can grow to fill the container.
- flex-shrink: 1: The item can shrink if necessary.
- flex-basis: auto: The initial size of the item is based on its content.
flex: 0 1 auto:
- flex-grow: 0: The item will not grow to fill the container.
- flex-shrink: 1: The item can shrink if necessary.
- flex-basis: auto: The initial size of the item is based on its content.
flex: none:
- flex-grow: 0: The item will not grow to fill the container.
- flex-shrink: 0: The item will not shrink.
- flex-basis: auto: The initial size of the item is based on its content.

These utility classes and CSS shorthand properties help manage the layout and behavior of flex items within a flex container, making it easier to create responsive and adaptive designs.

flex-basis to a percentage​

Key Points​

When flex-basis` values of flex items in a flex container exceed 100%​

Without Flex Wrap​

With Flex Wrap​

Flex Shrink​

Summary​

Understanding flex-grow in CSS​

Basic Concept​

Example​

HTML​

Explanation​

Visualization​

Additional Properties​

Practical Usage​

Summary​

Understanding flex-shrink in CSS​

Basic Concept​

Example​

HTML​

Explanation​

Visualization​

Calculation​

Practical Usage​

Summary​

Flex Shorthand Properties for flex-grow , flex-shrink amd flex-basis​

Tailwind CSS Utility Classes​

Standard CSS​

Explanation of Flex Shorthand Properties​

`flex-basis` to a percentage

Key Points

When flex-basis` values of flex items in a flex container exceed 100%

Without Flex Wrap

With Flex Wrap

Flex Shrink

Summary

Understanding `flex-grow` in CSS

Basic Concept

Example

HTML

Explanation

Visualization

Additional Properties

Practical Usage

Summary

Understanding `flex-shrink` in CSS

Basic Concept

Example

HTML

Explanation

Visualization

Calculation

Practical Usage

Summary

Flex Shorthand Properties for `flex-grow` , `flex-shrink` amd `flex-basis`

Tailwind CSS Utility Classes

Standard CSS

Explanation of Flex Shorthand Properties