FLEXBOX COMPLETE NOTE: flex-basis, flex-grow, flex-shrink, align-self, order

1. What Is flex-basis?

The flex-basis property defines the initial size of a flex item inside a flex container.

This is the size of the item before Flexbox starts:

• distributing free space with flex-grow
• shrinking items with flex-shrink

So, flex-basis is the starting size used by Flexbox when calculating layout.

Syntax

flex-basis: auto;
flex-basis: 200px;
flex-basis: 30%;

Main Idea

• width sets the width of an element
• flex-basis sets the initial size of a flex item along the main axis

This is very important:

• if the main axis is horizontal, flex-basis works like width
• if the main axis is vertical, flex-basis works like height

In One Line

width = normal width
flex-basis = starting size of a flex item

2. Simple flex-basis Example

HTML

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

CSS

.container {
  display: flex;
  width: 900px;
  border: 2px solid black;
}

.item {
  flex-basis: 200px;
  border: 1px solid blue;
}

What Happens

• each item first tries to take 200px
• 3 items x 200px = 600px
• the container is 900px wide
• so 300px stays free

Visual Idea

Container: 900px

|--------200px--------|--------200px--------|--------200px--------|
|         1           |          2          |          3          |

Used space: 600px
Free space: 300px

3. flex-basis Is Not the Final Size

This is one of the most important points.

flex-basis only sets the starting size.

After that, the final size can still change because of:

• flex-grow
• flex-shrink

Example

.container {
  display: flex;
  width: 900px;
  border: 2px solid black;
}

.item {
  flex-basis: 200px;
  flex-grow: 1;
  border: 1px solid blue;
}

What Happens

• at first: 3 x 200px = 600px
• free space: 900px - 600px = 300px
• all items have flex-grow: 1
• so the extra 300px is shared equally
• each item gets 100px more
• final size of each item = 300px

Visual Idea

At first:
|----200----|----200----|----200----|      free: 300px

After flex-grow:
|------300------|------300------|------300------|

Conclusion

flex-basis is only the beginning, not always the final result.

4. Different flex-basis Values

Example

.container {
  display: flex;
  width: 1000px;
  border: 2px solid black;
}

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

.item2 {
  flex-basis: 300px;
  background: lightgreen;
}

.item3 {
  flex-basis: 200px;
  background: lightpink;
}

What Happens

• item 1 starts at 100px
• item 2 starts at 300px
• item 3 starts at 200px
• total = 100 + 300 + 200 = 600px
• container = 1000px
• free space = 400px

If flex-grow is not set, the items stay that size and the extra space remains empty.

Visual Idea

Container: 1000px

|--100--|--------300--------|-----200-----|
|   1   |         2         |      3      |

Total used: 600px
Free space: 400px

5. flex-basis and width

A common question is: What happens if both width and flex-basis are set?

Example

.item {
  width: 300px;
  flex-basis: 150px;
}

Inside a flex container, flex-basis has priority for the starting size.

So the browser uses 150px, and width: 300px is effectively ignored for that flex calculation.

Conclusion

If both are set, flex-basis is more important for the flex item.

Visual Idea

width: 300px
flex-basis: 150px

Result in flex layout:
starting size = 150px

6. flex-basis: auto

Example

.item {
  flex-basis: auto;
}

auto means:

• use width if width is set
• if width is not set, use the content size

Example 1

.item {
  width: 250px;
  flex-basis: auto;
}

Result

• starting size = 250px

Example 2

.item {
  flex-basis: auto;
}

If there is no width, the size depends on the text or other content inside the element.

Visual Idea

flex-basis: auto

If width exists -> use width
If width does not exist -> use content size

7. Percentage Values

flex-basis can also use percentages.

Example

.item {
  flex-basis: 50%;
}

This means the item takes 50% of the flex container size along the main axis.

Example

.container {
  display: flex;
  width: 800px;
}

.item {
  flex-basis: 25%;
}

What Happens

• 25% of 800px = 200px
• so each item starts at 200px

Visual Idea

Container: 800px

25% = 200px

|----200----|----200----|----200----|----200----|

8. Vertical Main Axis

By default, Flexbox uses:

flex-direction: row;

That means the main axis is horizontal.

But if we write:

flex-direction: column;

then the main axis becomes vertical.

In that case, flex-basis works like height.

Example

.container {
  display: flex;
  flex-direction: column;
  height: 700px;
  border: 2px solid black;
}

.item {
  flex-basis: 150px;
  border: 1px solid red;
}

What Happens

• each item starts with a height of 150px

Visual Idea

Container (column)

|----------|
|   150px  |
|    1     |
|----------|
|   150px  |
|    2     |
|----------|
|   150px  |
|    3     |
|----------|

Conclusion

• in row, flex-basis usually acts like width
• in column, flex-basis usually acts like height

9. min-width and max-width

Even if flex-basis is set, size limits still work.

Example

.item {
  flex-basis: 300px;
  min-width: 200px;
  max-width: 250px;
}

What Happens

• the item starts with 300px
• but max-width: 250px prevents it from becoming wider than 250px

Result

• final size = 250px

Visual Idea

flex-basis: 300px
max-width: 250px

Result: 250px

Conclusion

min-width and max-width can limit the final size even when flex-basis is set.

10. flex-basis + flex-shrink

If the total size of items is larger than the container, the items must shrink.

Example

.container {
  display: flex;
  width: 500px;
  border: 2px solid black;
}

.item {
  flex-basis: 200px;
  flex-shrink: 1;
}

We Have

• 3 items
• 3 x 200px = 600px
• container width = 500px
• 100px is missing

Because of flex-shrink: 1, the items become smaller.

Visual Idea

At first:
|----200----|----200----|----200----| = 600px

Container:
|------------500px------------|

After shrink:
items become smaller

11. Practical Card Example with flex-basis

HTML

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

CSS

.cards {
  display: flex;
  gap: 20px;
  width: 1000px;
}

.card {
  flex-basis: 300px;
  flex-grow: 1;
  padding: 20px;
  border: 1px solid gray;
}

How It Works

• each card starts at 300px
• if there is extra space, the cards grow
• because of flex-grow: 1, they remain flexible

This is useful for:

• product cards
• feature blocks
• columns
• responsive sections

Visual Idea

At first:
|-----300-----|-----300-----|-----300-----|

After distributing free space:
|-------320-------|-------320-------|-------320-------|

12. flex-grow

flex-grow tells a flex item whether it is allowed to become bigger and take free space.

Example

.content {
  flex-grow: 1;
}

Meaning

• this item can grow
• it can take the remaining free space in the container

Super Short Memory Help

flex-grow: 1 = take all remaining free space

In a Row

• it usually makes an element wider

In a Column

• it usually makes an element taller

13. Flexible Sidebar Layout with flex-grow

A very common layout is:

• fixed-width sidebar
• flexible content area

HTML

<div class="container">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main content</main>
</div>

CSS

.container {
  display: flex;
}

.sidebar {
  width: 250px;
  background: #ddd;
}

.content {
  flex-grow: 1;
  background: #f5f5f5;
}

How It Works

┌──────────────┬────────────────────────────────────┐
│              │                                    │
│   Sidebar    │             Content                │
│   (250px)    │         (fills remaining space)    │
│              │                                    │
└──────────────┴────────────────────────────────────┘

• sidebar keeps a fixed width of 250px
• content grows and takes all remaining free space

Visual Idea

|---- 250px ----|------------- remaining free space -------------|
|    Sidebar    |                  Main content                  |

This is very useful for:

• dashboard layouts
• admin panels
• websites with side navigation

14. Sticky Footer with flex-grow

Another common use of flex-grow is a sticky footer.

Problem

If the page has very little content, the footer can move upward and leave empty space below it.

Bad Result

[Header]
[Main]
[Footer]

(empty space below)

We usually want:

• header at the top
• footer at the bottom
• main content stretching if needed

HTML

<div class="page-container">
  <header>Page header</header>
  <main>Main content</main>
  <footer>Page footer</footer>
</div>

CSS

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

Why This Works

1. min-height: 100vh makes the wrapper at least as tall as the screen
2. display: flex and flex-direction: column arrange items vertically
3. main { flex-grow: 1; } makes the main content stretch and fill free space

Result

• the footer is pushed to the bottom

Visual Idea

Without flex-grow:

|---------------- screen ----------------|
| Header                                |
| Main                                  |
| Footer                                |
|                                       |
|        empty space below              |
|---------------------------------------|

With flex-grow: 1:

|---------------- screen ----------------|
| Header                                |
| Main                                  |
| Main grows to fill free space         |
| Main grows to fill free space         |
| Footer                                |
|---------------------------------------|

Extra Note

vh means viewport height.

• 100vh = 100% of browser window height
• 50vh = 50% of browser window height
• 5vh = 5% of browser window height

15. flex-shrink

flex-shrink defines whether a flex item is allowed to become smaller than its initial size.

Syntax

flex-shrink: value;

Important Points

• by default, flex items have flex-shrink: 1
• this means they are allowed to shrink
• flex-shrink: 0 prevents shrinking
• negative values are not allowed

Main Idea

When the total size of items is larger than the container, Flexbox may shrink them.

That is what flex-shrink controls.

Short Summary

• flex-shrink: 1 -> item may become smaller
• flex-shrink: 0 -> item cannot shrink

16. Real Example: Icon and Text

HTML

<div class="card">
  <span class="icon"></span>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet earum odio
    harum! Nulla aliquid quasi facere atque, corrupti voluptatum cupiditate
    placeat delectus, velit alias dicta praesentium iste amet eos vero.
  </p>
</div>

CSS

.card {
  display: flex;
  gap: 10px;
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}

.icon {
  width: 40px;
  height: 40px;
}

What Seems Strange

• the icon has width: 40px
• but in the browser it may still become narrower

Why?

Because flex items have flex-shrink: 1 by default.

So the icon is allowed to shrink when space is tight.

Visual Idea

Before shrinking:
| icon 40px | long text that needs a lot of space |

Actual result:
the icon may become smaller because the text competes for space

Solution

.icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

Now

• the icon keeps its full width
• the remaining space goes to the text

Visual Idea

Without flex-shrink: 0
|--icon squeezed--|----------- text -----------|

With flex-shrink: 0
|----40px icon----|---------- text ------------|

Practical Rule

Use flex-shrink: 0 when you do not want an item to become smaller.

Very common for:

• icons
• logos
• avatars
• buttons
• images
• decorative blocks

17. align-self

align-self allows one flex item to change its position on the cross axis.

It overrides align-items for only that one item.

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Important Idea

• align-self works only on the cross axis
• there is no equivalent property for moving only one item on the main axis

Short Summary

• align-items = alignment for all flex items
• align-self = alignment for one specific flex item

Example

If the container has:

align-items: stretch;

but one item should behave differently, we can write:

align-self: flex-start;

18. Example: Image Inside a Card

Sometimes a flex container stretches all items, and an image becomes taller than we want.

Instead of changing alignment for everything, we can override only the image.

Example

.card img {
  align-self: flex-start;
}

Meaning

• the image should not stretch with the other items
• it should start at the top

Visual Idea

Container rule:
align-items: stretch

Image override:
img {
  align-self: flex-start;
}

Result:
image stays at the top
text behaves normally

Extra Example

.avatar {
  align-self: center;
}

Meaning

• only the avatar is centered on the cross axis

19. order

By default, flex items appear in the same order as in the HTML.

The order property allows us to change the visual order of items without changing the HTML itself.

Syntax

order: number;

Default Value

order: 0;

Example

HTML:

<div class="container">
  <div class="one">Item 1</div>
  <div class="two">Item 2</div>
  <div class="three">Item 3</div>
</div>

CSS:

.container {
  display: flex;
}

.one {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 0;
}

Visual Result

• HTML order: 1, 2, 3
• visual order: 3, 2, 1

Why?

• item 3 has order: 0
• item 2 has order: 1
• item 1 has order: 2

Visual Idea

HTML order:
[1] [2] [3]

Visual order:
[3] [2] [1]

Warning

This property is used carefully because it can create accessibility and usability problems.

The screen may show one order, but:

• keyboard navigation
• screen readers
• source code structure

may still follow the original HTML order.

So it is usually better not to use order unless there is a good reason.

Extra Example

.featured {
  order: -1;
}

Meaning

• this item appears earlier than normal items

20. Short Summary of Key Properties

flex-basis

• sets the starting size of a flex item

Example

.item {
  flex-basis: 200px;
}

Meaning

Start with 200px, then Flexbox may still grow or shrink it.

flex-grow

• controls whether an item can grow and take free space

Example

.item {
  flex-grow: 1;
}

Meaning

Take available free space.

flex-shrink

• controls whether an item can become smaller

Example

.icon {
  flex-shrink: 0;
}

Meaning

Do not let this item shrink.

align-self

• changes cross-axis alignment for one item only

Example

img {
  align-self: flex-start;
}

Meaning

Align only this item differently.

order

• changes the visual order of flex items

Example

.item {
  order: 2;
}

Meaning

Show this item later than items with smaller order values.

21. Mini Cheat Sheet

flex-basis  -> starting size
flex-grow   -> can the item grow?
flex-shrink -> can the item shrink?
align-self  -> how does one item align on the cross axis?
order       -> in what visual order does the item appear?

Very Short Memory Help

flex-grow   = grow
flex-shrink = shrink
align-self  = align one item
order       = change visual order

22. Common Mistakes

Mistake 1

Thinking flex-basis is the final size.

Wrong. It is only the initial size.

Mistake 2

Using width and flex-basis together without understanding the difference.

Usually this is avoided because flex-basis takes priority in flex layout.

Mistake 3

Forgetting axis direction.

Remember:

• in row, it acts like width
• in column, it acts like height

Mistake 4

Ignoring min-width and max-width.

They can limit the final result.

Mistake 5

Forgetting that flex items shrink by default.

Many elements become smaller because flex-shrink: 1 is the default.

Mistake 6

Using order too freely.

Visual order can become different from HTML order, which may confuse users and assistive technologies.

23. Small Practical Example

HTML

<div class="card">
  <span class="icon"></span>
  <p>Some long text goes here...</p>
</div>

CSS

.card {
  display: flex;
  gap: 10px;
  width: 300px;
}

.icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: gray;
}

.card p {
  margin: 0;
}

What Happens

• .card is a flex container
• the icon has a fixed size
• flex-shrink: 0 protects the icon
• the text takes the remaining space

24. Full Example with flex-basis and flex-grow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>flex-basis</title>
  <style>
    .container {
      display: flex;
      width: 900px;
      border: 2px solid black;
      gap: 10px;
    }

    .item {
      flex-basis: 200px;
      flex-grow: 1;
      padding: 20px;
      background: lightblue;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Block 1</div>
    <div class="item">Block 2</div>
    <div class="item">Block 3</div>
  </div>
</body>
</html>

What Happens

• each block starts at 200px
• then the extra space is shared equally
• all blocks become wider

25. Final Summary

flex-basis is a property that sets the initial size of a flex item.

The most important things to remember:

• it is not always the final size
• it works along the main axis
• in row it usually behaves like width
• in column it usually behaves like height
• flex-grow can make the item bigger
• flex-shrink can make the item smaller
• if both width and flex-basis are set, flex-basis is more important in flex layout
• min-width and max-width can still limit the result

Also remember these related properties:

• flex-grow = take free space
• flex-shrink = allow or prevent shrinking
• align-self = align one item differently on the cross axis
• order = change visual order, but use carefully

Super Short Final Memory Line

flex-basis = start size, flex-grow = grow, flex-shrink = shrink, align-self = align one, order = visual order