Day 4 as a Full Stack Intern: Flexbox

Flexbox is a one-dimensional layout system used to arrange elements in a row OR a column.

Once you understand main axis + cross axis, almost everything else becomes easy.

1. First: What is Flexbox?

Suppose you have:

A
B
C

And:

.container {
display: flex;
}

Now .container becomes a flex container, and A, B, C become flex items.

By default:

flex-direction: row;

So the browser arranges them like:

┌──────────────────────────────────────┐
│ A B C │
└──────────────────────────────────────┘
→ → → → → → → → →
MAIN AXIS

That's the foundation.

1. Main Axis vs Cross Axis ⭐⭐⭐

This is probably the most important Flexbox concept.

There are always two axes:

          CROSS AXIS
              ↓
              ↓
    ┌─────────────────────┐
    │ A      B      C     │
    │                     │
    └─────────────────────┘
    ─────────────────────→
         MAIN AXIS

But here's the important part:

The direction depends on flex-direction.
flex-direction: row
.container {
display: flex;
flex-direction: row;
}

Main axis → horizontal

Cross axis → vertical

    CROSS
      ↓
      ↓

A B C ─────────→
MAIN
flex-direction: column
.container {
display: flex;
flex-direction: column;
}

Now everything rotates.

Main axis → vertical

Cross axis → horizontal

    MAIN
      ↓
      ↓
      A
      B
      C

←──── CROSS ────→
⭐ Remember:

Don't memorize:

justify-content = horizontal

That's wrong.

Instead remember:

justify-content works along the MAIN axis.

And:

align-items works along the CROSS axis.

This distinction is extremely important.

1. justify-content

justify-content controls how flex items are positioned along the main axis.

Example:

.container {
display: flex;
justify-content: center;
}

With row:

┌──────────────────────────────────────┐
│ A B C │
└──────────────────────────────────────┘
↑
centered

Because the main axis is horizontal.

Common values
flex-start
justify-content: flex-start;
A B C

Items start at the beginning of the main axis.

center
justify-content: center;
A B C
flex-end
justify-content: flex-end;
A B C
space-between
justify-content: space-between;
A B C

Space goes between the items.

space-around
A B C

Each item gets space around it.

space-evenly
A B C

Equal spacing everywhere.

1. align-items

Now we move to the cross axis.

Example:

.container {
display: flex;
height: 300px;
align-items: center;
}

With:

flex-direction: row;

the cross axis is vertical.

So:

┌──────────────────────────────┐
│ │
│ A B C │
│ │
└──────────────────────────────┘
↑
cross-axis
centered

Common values:

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;
flex-start

Items go toward the beginning of the cross axis.

center

Items are centered across the cross axis.

flex-end

Items go toward the end.

stretch

Items stretch across the cross axis if their cross-axis size is auto.

1. The easiest way to understand alignment ⭐

Imagine:

.container {
display: flex;
flex-direction: row;
}

Then:

Property Controls
justify-content Main axis → horizontal
align-items Cross axis → vertical

So:

justify-content: center;
align-items: center;

means:

Center everything horizontally AND vertically.

This is extremely common.

.container {
display: flex;
justify-content: center;
align-items: center;
}

1. Now the BIG topic: flex-grow, flex-shrink, flex-basis

These three control how flex items consume space.

Think:

flex-grow → "Can I take extra space?"
flex-shrink → "Can I give up space?"
flex-basis → "How big do I want to start?"

1. flex-basis

flex-basis defines the item's initial size along the main axis.

Example:

.item {
flex-basis: 200px;
}

If direction is:

flex-direction: row;

then basis means roughly:

Start with a width of 200px.

A
←── 200px ──→

If direction is:

flex-direction: column;

then basis means roughly:

Start with a height of 200px.

This is why saying "flex-basis is width" is not quite correct.

Correct:

flex-basis is the initial size along the main axis.

1. flex-grow

Suppose container has extra space.

.container {
display: flex;
}

.item {
flex-grow: 1;
}

If three items all have:

flex-grow: 1;

they share the remaining free space equally.

Imagine:

Container:

┌────────────────────────────────────────┐
│ │
└────────────────────────────────────────┘

Three items:

A B C

If all:

flex-grow: 1;

then:

A B C
████ ████ ████

Each gets an equal share of extra space.

What if:
A { flex-grow: 1; }
B { flex-grow: 2; }
C { flex-grow: 1; }

Then the extra space is divided:

A → 1 part
B → 2 parts
C → 1 part

Total:

1 + 2 + 1 = 4

So B gets twice as much extra space as A or C.

1. flex-shrink

Now imagine the opposite.

The container is too small.

For example:

Container = 500px

A = 300px
B = 300px

Total required:

600px

But container only has:

500px

Something has to shrink.

That's where:

flex-shrink

comes in.

By default:

flex-shrink: 1;

So flex items are allowed to shrink.

If:

.item {
flex-shrink: 0;
}

you're saying:

Don't shrink me.

This is extremely useful for things like sidebars.

Example:

.sidebar {
flex-basis: 250px;
flex-shrink: 0;
}

Meaning:

Give my sidebar an initial 250px size and don't squash it when space gets tight.

This connects directly to the Flexbox layout you were working with earlier.

1. flex-grow, flex-shrink, flex-basis together ⭐⭐⭐

You can write:

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

But there's a shorthand:

.item {
flex: 1 1 200px;
}

Meaning:

   grow  shrink  basis
     ↓      ↓      ↓

flex: 1 1 200px;

1. What does flex: 1 mean?

You'll see this everywhere in real-world CSS:

.item {
flex: 1;
}

It is essentially:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

So:

Start from zero basis and distribute available space according to the grow factor.

For example:

.left {
flex: 1;
}

.right {
flex: 1;
}

They share the available space approximately equally.

1. A very important real-world example

Suppose:

    Sidebar



    Main Content

CSS:

.layout {
display: flex;
}

.sidebar {
flex: 0 0 250px;
}

.content {
flex: 1;
}

Let's decode it.

Sidebar
flex: 0 0 250px;

means:

grow = 0
shrink = 0
basis = 250px

So:

Sidebar stays 250px.

Content
flex: 1;

means:

Take the remaining available space.

So:

┌──────────────────────────────────────────┐
│ Sidebar │ Main Content │
│ 250px │ flex: 1 │
└──────────────────────────────────────────┘

This is one of the most useful Flexbox patterns you'll use as a developer.

1. align-self

What if you want to move one specific item?

Instead of:

.container {
align-items: center;
}

you can do:

.item2 {
align-self: flex-end;
}

Example:

┌─────────────────────────────┐
│ │
│ A B │
│ │
│ C │
└─────────────────────────────┘

Maybe:

.container {
align-items: center;
}

.item3 {
align-self: flex-end;
}

align-self overrides align-items for that particular item.

1. gap

You should also know:

.container {
display: flex;
gap: 20px;
}

Instead of manually doing:

.item {
margin-right: 20px;
}

you can use:

gap: 20px;

Result:

A 20px B 20px C

Very commonly used in modern CSS.

1. flex-wrap

By default:

flex-wrap: nowrap;

Everything tries to stay on one line.

Suppose:

A B C D E F G H

doesn't fit.

With:

flex-wrap: wrap;

they can move onto another line:

A B C D
E F G H

1. align-content — DON'T confuse this with align-items

This is slightly more advanced but important.

align-items:

Aligns items inside a flex line.

align-content:

Controls spacing/alignment between multiple flex lines.

It only becomes meaningful when you have:

flex-wrap: wrap;

For example:

.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}

Think:

align-items
↓
[A B C]

align-content
↓
[A B C]

[D E F]
↑
controls the lines as a group